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

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 concrete5，这限制了我编辑HTML的能力。 刚刚发现firefox中的图像效果并没有闪烁，它在chrome和safari中也是如此。

编辑：image 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/