悬停图像闪烁问题的CSS

Question

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

与此同时，由于我对类 (.term) 的 CSS 设置，H3 标题和 .term-image 类之间存在空白-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

添加到您的 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 元素放在标签中。