У меня проблемы с моим мероприятием 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);
}
0
Matt Hutch 20 Апр 2016 в 23:11

2 ответа

Лучший ответ

Я думаю, что более простой способ сделать это - использовать :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>);
}
2
Benjamin Downs 20 Апр 2016 в 20:15

Вы пробовали использовать селектор 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);
}
0
Jeff Puckett 20 Апр 2016 в 20:15