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

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

HTML：

  

    
    

      
Description
    
  

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忽略。我该如何工作？

首先，您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