禁用链接悬停，背景图片悬停效果会导致闪烁答案

【问题标题】：Disable hover on link, background image hover effect causes flickering禁用链接悬停，背景图片悬停效果会导致闪烁
【发布时间】：2015-09-08 21:45:12
【问题描述】：

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

一些代码：

$(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 中工作，这限制了我编辑 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%;
}

【问题讨论】：

标签： jquery css hover flicker

【解决方案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');
  });

【讨论】：

谢谢。这给出了相同的结果，当我将鼠标悬停在链接“BEKIJK REALISATIES”上时，图像悬停效果消失了，因此不再模糊。这会导致图像模糊效果闪烁。
@JacobVanAchter 请再试一次。我更新了答案。
@JacobVanAchter 我认为问题出在文本上，但我看不到这种效果。只需为 text:hover 添加效果。
@JacobVanAchter 图片的css在哪里？
@JacobVanAchter 我不知道那是什么效果，但试试jsfiddle.net/LLz19way/3 之类的东西（效果可以是图像上的透明 din）。希望这会有所帮助。

【解决方案2】：

如果你没问题，你可以把realisatieslink1移到realisatiesafb1里面。那么一切都应该正常了。

http://jsfiddle.net/pLtc88he/

【讨论】：

这是我做不到的，因为concrete5 CMS系统的限制。我正在使用图像的图像块，以及链接“BEKIJK REALISATIES”的图像块下的内容块。