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之前。出于某种奇怪的原因，如果您将opacity的{{1}}更改为小于1的值，img就会消失，应该如此。

h3

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

这就是闪烁的原因，因为只要<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更改为低于1的值，opacity就会隐藏在h3之后。

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

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

1 个答案: