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＆gt;中.description部分我使用display: none（JQuery需要使div最初隐藏）和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

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

2 个答案: