Hiding/Canceling 对特定图像的悬停效果

Question

我只是想展示一些没有悬停效果的图片。我试过了，但没有用。我是这个编码领域的新手，这就是我能做的^^

<div>
<img border="0" src="IMAGE-URL" data-original-width="500" data-original-height="65"/>

<style>
    .post img:hover { visibility: hidden!important; }
</style>


</div>

我也试过{display :none}，但它们都影响了所有图像并导致类似闪烁的错误。

Answer 1

您应该尝试将两个 classes 分配给您的两个图像，并为悬停状态定义不同的行为。此示例说明了一般逻辑，其中 div--nohover class 定义悬停时的标准样式：

.div{
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: red;
}
.div:hover{
  background-color: green;
}

.div--nohover:hover{
  background-color: red;
}

<div class="div"></div>
<div class="div"></div>
<div class="div div--nohover"></div>

Answer 2

您可以使用 pointer-events 禁用悬停效果

.post img:hover { pointer-events: none; }

Hiding/Canceling 对特定图像的悬停效果

Hiding/Canceling Hover Effect on Specific Images

html

blogger

hover