同时使用display: none和display:flex；

Question

我有一个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 > div部分，我同时使用了display: none ( JQuery需要的，以便最初隐藏.description )和display: flex (用于使内容很好地居中)。但是当这两个属性组合在一起时，最后一个display属性将被读取，而display: none将被忽略。我怎么才能让这个东西工作呢？

Answer 1

首先，你想从你的CSS中删除display: flex，因为它正在被使用(因为它覆盖了之前的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

Answer 2

你的容器是flex容器，所以里面的flex项不应该有一个初始的display: none。CSS规则将采用最后一个属性定义，因此重复的显示属性将覆盖以前的定义。我和你的codepen玩过了，我已经更新了它。Is this what you're looking for?

.description {
    /* ... */
    display: none;
    /* ... */
}   // .description