CSS关于悬停图像闪烁问题

我试图做一个简单的CSS悬停，但得到了一个闪烁的图像问题。我能做些什么来解决这个问题吗

同时，由于我对类（

.term desc

）的CSS设置，在

H3

标题和

.term image

类之间存在空白。有没有办法消除这种差距？由

position:relative

创建的间隙似乎不容易消除

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

---

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

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

添加到css:

指针事件：无.categorywrapper.views行中的code>。术语说明

结果基本上是：

.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;
}

这是你的电话号码

---

如果您希望它覆盖在图像上，也可以这样做，但将.term desc元素放在标记内。

添加到css:

指针事件：无.categorywrapper.views行中的code>。术语说明

结果基本上是：

.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;
}

这是你的电话号码

---

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

我认为您的目的是在悬停图像时显示文本。如果这是真的，那么您不仅选择了一种麻烦的方法，而且还选择了一种不起作用的方法

由于您的图像已经包装在

div

中，因此实现您的目标非常容易：只需将

div

中的文本放在包含图像的同一容器中即可。应用正确的定位，并为其设置默认的

opacity:0所以它最初是不可见的

然后

为了消除h3和图像之间不需要的空白，只需设置
h3
的
边距底部：0

我认为您的目的是在悬停图像时显示文本。如果这是真的，那么您不仅选择了一种麻烦的方法，而且还选择了一种不起作用的方法

由于您的图像已经包装在
div
中，因此实现您的目标非常容易：只需将
div
中的文本放在包含图像的同一容器中即可。应用正确的定位，并为其设置默认的
opacity:0所以它最初是不可见的

然后

为了消除h3和图像之间不需要的空白，只需设置
h3
的
边距底部：0

“我试图制作一个简单的css悬停…”…结果制作了一个笨重的css悬停，但不起作用。“为什么要过度复杂呢？”我试图制作一个简单的css悬停…”…结果制作了一个笨重的css悬停，但不起作用。“为什么要过度复杂呢？谢谢，@connexo。”。但我不能这样做，因为html结构是固定的（它是Drupal视图生成的页面。为了让div.term-desc保留在div.term-image中，我必须更改模板文件——由于潜在的维护成本，我不愿意这样做）。谢谢，@conneso。但我不能这样做，因为html结构是固定的（它是Drupal视图生成的页面。为了让div.term-desc保留在div.term-image中，我必须更改模板文件——由于潜在的维护成本，我不愿意这样做）。
.categorywrapper .views-row .term-image:hover .term-desc {
    opacity: 1;
}