CSS悬停图像闪烁问题

Question

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

同时，由于我对类 ( ) 的 CSS 设置，H3标题和类之间存在空白。有没有办法消除这个差距？看来，所产生的缝隙并不容易消除。.term-image.term-descposition: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 索引，这意味着它位于父元素后面并触发 mouseout 事件，从而关闭悬停。

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

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

这是JSFiddle

如果您希望它位于图像上，请执行相同的操作，但将 .term-desc 元素放在标签内。