备用 <div> 可见性（鼠标悬停图像）

Posted 2023-03-05

【中文标题】备用 <div> 可见性（鼠标悬停图像）

【英文标题】：Alternate <div> Visibility (mouseover image)

【发布时间】：2014-05-10 00:01:10

【问题描述】：

我在这里遇到了一些麻烦。我想在鼠标悬停在下面的 div 上方时显示图像。

html：

<div id="testmouseover">
<img src="testmouseover.png">
</div>

CSS：

#testmouseover 
 
     left: -9px; 
     top: -9px; 
     position: absolute; 
     width: 865px;
     height: 653px;
     z-index:1;
 

我有 4 个这样的 div 应该显示不同的图像，那么如何为悬停添加 ID？ 有人可以帮我编写悬停的 CSS 代码吗？将不胜感激！

【参考方案1】：

我认为这比你想象的要容易：试试 #testmouseover:hover

如果这不是正确答案，请在 codepen 上分享代码示例

【参考方案2】：

将onmouseover() 事件附加到 div。你可以从w3schools那里得到一些指点。

在鼠标悬停时调用的函数中，更改innerHTML 属性以获得所需的图像。

这可以使用 jQuery 更快地实现：

$("#divId").click(function()
    $(this).html("Ur image html here")
);

【讨论】：

太复杂了，你的答案需要包括 jQuery。简单地使用您的代码是行不通的。请参阅我的答案以获得非常简单和纯粹的 CSS 解决方案：***.com/a/22748599/3461722

【参考方案3】：

如果有帮助，这里是一个 html 版本。如果我是正确的，z-index 是用于分层图像（堆叠）而不是用于鼠标悬停。

<img src="NORMAL IMAGE" onmouseover="this.src='MOUSE OVER IMAGE'" onmouseout="this.src='Normal Image'" >

【讨论】：

如果您只在一页上需要它，我的答案将起作用，但如果您需要在一页以上，则需要纯 CSS 方法。如果你能澄清一下会有所帮助。

【参考方案4】：

试试这个，纯 CSS：

#testmouseover img 
    display: none;

#testmouseover:hover img 
    display: inline;

一定要给 div 一些宽度和高度，这样你就不会得到奇怪的闪烁的东西。对于多个 div，只需给它们不同的 ID 并复制此 CSS 几次。如果所有的 div 都相同，您也可以给它们全部相同的类，或者给它们一个具有上述 CSS 的类和一个具有 div 特定样式的 ID。

示例：http://jsfiddle.net/S44MS/