同时使用display：none和display：flex;

user818700 发表于 Dev

用户818700

我有一个div，当将鼠标悬停在它上面时，它的子元素之一-另一个div-应该使用JQuery淡入和淡出。为了获得更好的主意，您可以看一下下面的codepen。

HTML：

<div id="container">

  <div class="item">
    <img src="https://placehold.it/375x250">
    <div class="description">
      <h3>Description</h3>
    </div>
  </div>

</div>

CSS：

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container .item {
  width: 375px;
  height: 250px;
  position: relative;
}

#container .item img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#container .item .description {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

jQuery的：

$(function () {

  $('.item').hover(
    function () {
      // mouse over
      $('.description').fadeIn(1000);
    },
    function () {
      // mouse out
      $('.description').fadeOut(1000);
    }
  );

});

在CSS>.description部分中，我同时使用了display: none（JQuery要求，以便div最初被隐藏）和display: flex（用于很好地使内容居中）。但是当两者结合在一起时，最后一个display属性将被读取并被display: none忽略。我该如何工作？

SidOfc

首先，您display: flex要从CSS中删除它，因为它已被使用（因为它覆盖了之前的display: none）

然后在你的JS，替换fadeIn用的组合下css和animate以使效果发生。

$(function() {
    $('.item').hover(
        function() {
            $('.description').css({opacity: 0, display: 'flex'}).animate({
                opacity: 1
            }, 1000);
        },
        function() {
            $('.description').fadeOut(1000);
        });
});

css此处的函数在每个效果设置之前使用opacity: 0，display: flex之后将使用animate opacity: 1

然后，fadeOut就没有什么特别的事情发生了，因为那会逐渐消失display: none

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。