Question

我在这里遇到了一些麻烦。当鼠标悬停在下面的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代码吗？非常感谢！

Answer 1

将div附加onmouseover()个事件。您可以从w3schools获取一些指示。

在onmouseover上调用的函数中，更改innerHTML属性以获得所需的图像。

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

试试这个，纯CSS：

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

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