我的 onmouseover 事件出现问题。我想做的是，当鼠标悬停在 div 上时，它会将背景更改为不同的图像，但当鼠标悬停在它上方时，它会返回到它的旧图像。这是我正在使用的代码；如果有人能帮我解决这个问题，我将不胜感激。
HTML
<body>
<div id="contentDiv">
<div id="ringDiv">
<div id="ringTL" onmouseover="ringTL.className='ringOverTL'">
</div>
<div id="ringTR">
</div>
<div id="ringBL">
</div>
<div id="ringBR">
</div>
</div>
</div>
</body>
CSS
#contentDiv{
width:80%;
margin-left:auto;
margin-right:auto;
}
#ringDiv{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width:410px;
height:410px;
}
#ringTL {
float:left;
width:205px;
height:205px;
background-image:url(../IMAGES/BackRing/TL.png);
}
#ringTR {
float:right;
width:205px;
height:205px;
background-image:url(../IMAGES/BackRing/TR.png);
}
#ringBL {
float:left;
width:205px;
height:205px;
background-image:url(../IMAGES/BackRing/BL.png);
}
#ringBR {
float:right;
width:205px;
height:205px;
background-image:url(../IMAGES/BackRing/BR.png);
}
.ringOverTL{
background-image:url(../IMAGES/FrontRing/TL.png);
}
.ringOverTR{
background-image:url(../IMAGES/FrontRing/TR.png);
}
.ringOverBL{
background-image:url(../IMAGES/FrontRing/BL.png);
}
.ringOverBR{
background-image:url(../IMAGES/FrontRing/BR.png);
}
最佳答案
我认为更简单的方法是使用 :hover。
尝试这样的事情:
<body>
<div id="contentDiv">
<div id="ringDiv">
<div id="ringTL">
</div>
<div id="ringTR">
</div>
<div id="ringBL">
</div>
<div id="ringBR">
</div>
</div>
</div>
#ringTL {
float:left;
width:205px;
height:205px;
background-image:url(../IMAGES/BackRing/TL.png);
}
#ringTL:hover {
background-image:url(..<your-other-photo>);
}
关于html - 更改 div 背景图片时遇到问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36754199/