基于兄弟标记顺序的奇怪悬停行为

Question

我将鼠标悬停在 div 上时发现了一个奇怪的问题，我花了一些时间进行故障排除。我很好奇为什么这件事会在未来帮助我自己和其他人。

<div>
  <img src="http://placehold.it/300x300" alt="" />
  <h3>Smoooth</h3>
</div>
<div>
  <h3>Janky</h3>
  <img src="http://placehold.it/300x300" alt="" />
</div>

基本上，将鼠标悬停在第一个上我会得到预期的结果。但是当 h3 在图像之前时，它表现得很糟糕。

附上codepen。

请参阅 Mark Szymanski

的笔 zqZOPN

Answer 1

实际上错误是 h3 在第二个版本中可见。它应该隐藏在 img 后面，因为它在 DOM 之前。出于某种奇怪的原因，如果您将 img 的 opacity 更改为小于 1 的值，h3 会消失，因为它应该消失。

img {
  display: block;
  opacity: .99;
  margin: 0;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  transition: opacity 200ms ease-in-out;
}

* {
  box-sizing: border-box;
}
section {
  width: 600px;
  margin: 3em auto;
}
div {
  float: left;
  position: relative;
  width: 48%;
  margin: 1%;
  background-color: dodgerblue;
  overflow: hidden;
  cursor: pointer;
}
img {
  display: block;
  opacity: .99;
  margin: 0;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  transition: opacity 200ms ease-in-out;
}
h3 {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 15%;
  text-align: center;
  width: 70%;
  background-color: dodgerblue;
  color: #fff;
  font-weight: 300;
  padding: 1em;
  transform: translateY(-75%);
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  transition: background-color 200ms ease-in-out;
}
div:hover h3 {
  background-color: transparent;
}
div:hover img {
  opacity: 0.25;
}

<section>
  <h4>Why does the h3 jump on hover when it's placed before the image in the mark-up?</h4>
  <div>
    <img src="http://placehold.it/300x300" alt="" />
    <h3>Smoooth</h3>
  </div>
  <div>
    <h3>Janky</h3>
    <img src="http://placehold.it/300x300" alt="" />
  </div>
</section>

这就是闪烁的原因，因为一旦 img opacity 变为小于 1 的值，h3 就会隐藏在 [=14= 后面].

要解决您的问题，您必须将 z-index:1 添加到 h3 以强制它出现在 img

的前面

基于兄弟标记顺序的奇怪悬停行为

Strange hover behavior based on order of sibling markup

css

css-transitions

markup