Question

我试图制作一个简单的CSS悬停但是有一个闪烁的图像问题。我有什么办法可以解决这个问题吗？

与此同时，由于我的类（H3）的CSS设置，.term-image标题和.term-desc类之间存在空白。有没有办法消除这种差距？ position:relative创建的差距似乎不容易被删除。

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

<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

在pointer-events:none;

中添加到您的css：.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 2

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

Answer 3

我假设你的目的是在悬停图像时显示文字。如果这是真的，那么你不仅选择了一种繁琐的方法，而且选择了一种不起作用的方法。

由于您的图片已经包含在div中，因此实现目标非常容易：只需将div的文本放在内的同一个容器中有图像的。应用正确的定位并给它一个默认的opacity: 0;，这样它最初是不可见的。

然后

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

要摆脱h3与图片之间不需要的空白，只需设置h3＆＃39; s margin-bottom: 0;

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

CSS悬停图像闪烁问题

3 个答案: