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

【问题标题】：Alternate <div> Visibility (mouseover image)备用 <div> 可见性（鼠标悬停图像）
【发布时间】：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 解决方案：stackoverflow.com/a/22748599/3461722

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

试试这个，纯 CSS：

#testmouseover img {
    display: none;
}
#testmouseover:hover img {
    display: inline;
}

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

【讨论】：