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/

小提琴： 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;
}

悬停时Chrome中的Z-Index闪烁

1 个答案: