Question

我在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);
}

Answer 1

我认为更简单的方法是使用: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>);
}

Answer 2

你试过css hover选择器吗？

<强> HTML

<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>
</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);
}

#ringTL:hover {
    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);
}

有关更改div背景图像的问题？

2 个答案: