Chrome 中悬停时 Z 索引闪烁

Answer 1

它闪烁是因为当您将鼠标悬停在元素上方时元素会移动。元素移动的原因是伪元素的定位。为了解决这个问题，我建议绝对将伪元素relative定位到父元素。这样做时，伪元素的位置不会对父元素产生任何影响。

更新示例

#blur img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  position: relative;
}
#blur img:hover {
  opacity: .4;
  z-index: 1;
}
#blur a:hover:before {
  content: "Learn More";
  background-color: #6d8e3b;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  color: #fff;
  font-size: 12px;
  opacity: .9;
  padding: 18px;
  width: 70px;
  z-index: 2;
}

Answer 2

还有另一种方法。

/* For the parent element */

#parent_element{
 position: relative;
}

/* For the img element that you would like to change on hover */

/* keep the default behavior in this rule, note that z-index is removed */

#img{
 opacity: .4;
 position: absolute;
}

/* on hover, we will just change the opacity to the desired value, note that we will remove z-index here as well */

#img:hover{
 opacity: .9;
}

希望这有帮助。