Question

我已经构建了一个演示，以在此处演示该问题的副本。

Codepen：https://codepen.io/anon/pen/pXvyMd

我正在尝试使其悬停在图像右上方的框上时，标题文本“这是测试”逐渐消失而不是立即消失。框周围的div按照编码在0.4秒内过渡出来，但是由于某些原因，字幕文本立即消失了。

为什么会发生这种情况，如何解决？根据CSS的以下行，应将过渡应用于所有元素：

.full-width-image-atf .content-main-image, .full-width-image-atf .content-main-image * { transition: 0.4s ease all }

感谢您的帮助。

img {width: 100%}
.full-width-image-atf .content-main-image {
  position: relative;
  color: #fff;
}

.full-width-image-atf .image-caption-wrap {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
  padding: 15px 20px;
}
.full-width-image-atf .image-caption-wrap:before {
  content: '\f05a';
  font-family: 'Font Awesome 5 Pro';
  font-size: 2em;
}
.full-width-image-atf .image-caption {
  display: none;
  padding-right: 10px;
}
.full-width-image-atf .image-caption-wrap:hover .image-caption {
  display: block;
}
.full-width-image-atf .image-caption-wrap:hover {
  background: black !important;
  cursor: pointer;
}
.full-width-image-atf .content-main-image, .full-width-image-atf .content-main-image * { transition: 0.4s ease all }

<div class='full-width-image-atf'>
  <div class="content-main-image">
    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/12/31/10/lion-face.jpg?w968h681" alt="This is a test">
    <div class="image-caption-wrap" style="background: none;">
      <span class="image-caption">This is a test</span>
    </div>
  </div>
</div>

Answer 1

这是如此简单。 CSS中的transition元素不适用于显示更改。因此，如果将显示更改为从块到无，则过渡将无法进行。或者会以扭曲的方式进行。

我将显示更改为不透明。

.full-width-image-atf .image-caption {
     opacity:0;
      padding-right: 10px;
    }
    .full-width-image-atf .image-caption-wrap:hover .image-caption {
      opacity:1;
    }

儿童div会立即消失，而不是像父母那样过渡

1 个答案: