CSS 关于悬停图像闪烁问题

Question

我试图制作一个简单的 CSS 悬停，但遇到了闪烁的图像问题。我可以做些什么来解决这个问题吗？

同时，H3 标题和 .term-image class 之间存在空白，因为我对 class 的 CSS 设置（ .term-desc)。有没有办法消除这种差距？看来 position:relative 造成的差距不容易消除。

我需要在鼠标悬停时隐藏图像。

http://jsfiddle.net/fveqkcnj/

<div class="categorywrapper">
  <div class="views-row views-row-1 views-row-odd views-row-first">
    <h3 class="term-title">    
      <a href="/categories/arts-culture">Arts &amp; Culture</a>
    </h3>

    <div class="term-desc">
        <p>This is Arts &amp; Culture</p>
    </div>
    <div class="term-image"> <a href="#"><img src="http://placehold.it/235x150/ffffee" /></a>

    </div>
</div>

.categorywrapper {
    width: 720px;
    clear:both;
}
.categorywrapper .views-row {
    float:left;
    position:relative;
    width:235px;
}
.categorywrapper .views-row h3 {
    position:relative;
    margin-left:30px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #000;
    width:80%;
    min-height:38px;
}
.categorywrapper .views-row .term-desc {
    position:relative;
    top:100px;
    left:20px;
    width:200px;
}
.categorywrapper .views-row .term-image {
    position:relative;
}
.categorywrapper .views-row .term-image:hover {
    z-index:-2;
}

Answer 1

我从来没有使用 z-index 进行图像悬停，但我想如果你将 z-index 向下移动，浏览器就不再认为你悬停在图像上，所以你会得到闪烁效果你提。尝试使用替代背景图像来制作悬停效果。或者通过改变不透明度。

Answer 2

添加到您的 css: pointer-events:none; 在 .categorywrapper .views-row .term-desc

基本上结果是：

.categorywrapper .views-row .term-desc {
    pointer-events:none;
    position:relative;
    top:100px;
    left:20px;
    width:200px;
}

此外，您在悬停元素上使用负 z-index，这意味着它位于父元素后面并触发关闭悬停的 mouseout 事件。

您可以解决此问题，而不是将以下 css 应用于行而不是图像：

.categorywrapper .views-row:hover .term-desc {
    z-index:2;
}

这是JSFiddle

如果你想在图像上使用它，请执行相同的操作，但将 .term-desc 元素放在标签内。

Answer 3

我假设您的意图是在将鼠标悬停在图像上时显示文字。如果是这样，那么您不仅选择了一种繁琐的方法，而且选择了一种行不通的方法。

由于您的图像已经包裹在 div 中，实现您的目标非常容易：只需将 div 和应该出现在 中的文本放在 [=28] 中=] 具有图像的同一容器。应用适当的定位并为其指定默认值 opacity: 0;，因此它最初是不可见的。

然后

.categorywrapper .views-row .term-image:hover .term-desc { opacity: 1; }

要同时消除 h3 和图像之间不需要的空白，只需设置 h3 的 margin-bottom: 0;

http://jsfiddle.net/fveqkcnj/5/

CSS 关于悬停图像闪烁问题

CSS on hover image blinking issue

css

hover