禁用链接上的悬停，背景图像悬停效果导致闪烁

Question

我目前正在处理具有悬停效果的图像。 将鼠标悬停在图像上时，链接变为可见。 图像对悬停有模糊效果。 问题是，当您将鼠标悬停在链接上（在图像顶部可见）时，图像开始闪烁（在模糊和不模糊之间）。

一些代码：

 $(document).ready(function() { $(".realisatieslink1").hide(); $(".realisatiesafb1").mouseenter(function() { $(".realisatieslink1").show(); }); $(".realisatiesafb1").mouseleave(function() { $(".realisatieslink1").hide(); }); }); 

 .realisatieslink1 a { padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; display: inline-block; margin-right: 10px; margin-left: 10px; font-size: 15px !important; border: 1px solid white; color: white !important; } .realisatieslink1 { margin-top: -120px; z-index: 10; position: relative; } .editing .realisatieslink1 { margin-top: 0px; } .realisatieslink1 p { margin-bottom: 0px; } 

 <div class="col-sm-3"> <div class="ccm-custom-style-container ccm-custom-style-slide31-83 realisatiesafb1 realisatieafb"> <a href="http://grafomantestsite2.be/index.php/realisaties"> <img src="http://grafomantestsite2.be/application/files/6314/4161/6181/realisatie1.png" alt="realisatie1.png" width="401" height="269" class="ccm-image-block img-responsive bID-83"> </a> </div> <div class="ccm-custom-style-container ccm-custom-style-slide31-85 realisatieslink1" style="display: none;"> <p><a href="http://grafomantestsite2.be/index.php/realisaties">BEKIJK REALISATIES</a> </p> </div> </div> 

有没有办法使闪烁停止？

以下是一些屏幕截图：

编辑：我正在CMS混凝土5中工作，这限制了我编辑HTML的能力。 刚刚发现图像效果不会在Firefox中闪烁，而是在chrome和safari中闪烁。

编辑：图像CSS：

 .realisatieafb { width: 100%; height: 200px; overflow: hidden; position: relative; } .realisatieafb img { position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; min-height: 100%; min-width: 100%; } 

Answer 1

尝试这个：

.realisatieslink1 {
  margin-top: -120px;
  /*z-index: 1;*/
  position: absolute;
  display:none;
}
.realisatieslink1:hover {
    display:block;
}
.realisatieafb img{
    position:relative;
}

$(document).ready(function() {
  $(".realisatiesafb1").mouseenter(function() {
    $(".realisatieslink1").show();
  });
  $(".realisatiesafb1").mouseleave(function() {
    $(".realisatieslink1").hide();
  });

});
.ccm-custom-style-container.ccm-custom-style-slide31-85.realisatieslink1:hover {
    display: block;
}

http://jsfiddle.net/LLz19way/2/

更新：您可以将鼠标悬停在文本上方为容器添加一个类：

  $(".realisatieslink1").mouseenter(function() {
    $(".realisatiesafb").addClass('hover');
  });
  $(".realisatieslink1").mouseleave(function() {
    $(".realisatiesafb").removeClass('hover');
  });

Answer 2

如果是对你合适，你可以移动realisatieslink1内realisatiesafb1 。 一切都应该正常工作。

http://jsfiddle.net/pLtc88he/