悬停时 Z-Index 在 Chrome 中闪烁

Question

我正在尝试使用以下代码创建一个悬停按钮，它在除 Chrome 以外的所有浏览器中都运行良好：

<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
    <a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
    <img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
    </a>
    </div>

        #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;
    }

    #blur img:hover {
        opacity: .4;
        z-index: 1;
    }

    #blur a:hover:before {
        background-color: #6d8e3b;
        color: #fff;
        content: "Learn More";
        display: block;
        font-size: 12px;
        margin-left: auto;
        margin-right: auto;
        opacity: .9 !important;
        padding: 18px;
        position: relative;
        top: 20em;
        width: 70px;
        z-index: 2;
        margin-top: -3em;
    }

出于某种原因，Chrome 不会让您将鼠标悬停在按钮上，否则它会出现故障并严重闪烁。有没有无需添加单独按钮即可解决此问题的简单方法？

实时页面： http://vina.typesetdesign.com/wines/varietal/

Fiddle: https://jsfiddle.net/35txpy8v/

Answer 1

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

Updated Example

#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;
}

悬停时 Z-Index 在 Chrome 中闪烁

Z-Index Flickering in Chrome on Hover

html

css

google-chrome

z-index