Question

我已经尝试过很多方法来解决这个问题，但我似乎无法找到解决方案，所以是时候向更有经验的人寻求帮助了。基本上我想要的是当我将鼠标悬停在img所在的'div'（盒子）上时图像会发生变化。看看代码：

<!DOCTYPE html>
<html>
    <head>
        <style>

            body {
            background: grey;
            }

            #box {
                margin: 0 auto;
                width:  300px;
                height: 300px;
                background: blue
            }
            #box img {
                display: block;
                margin: 0 auto;
                padding-top: 75px;
            }
        </style>
        <meta charset="utf-8">
    </head>
    <body>
        <a href="#">
            <div id="box">
                <img src="registration_icon_white.png" onmouseover="src='registration_icon_black.png'" onmouseout="'registration_icon_black.png'">
            </div>
        </a>
    </body>

（图像相同，只是颜色不同）

任何帮助都将不胜感激，谢谢。

Answer 1

您没有指定分配URL的src。您需要在onmouseover和onmouseout事件中使用this.src='URL'。

以下是有关this关键字的链接： How does the "this" keyword work?

Answer 2

尝试this.src：

    <div id="box">              
      <img title="some title" src="registration_icon_white.png" 
           onmouseover="this.src='registration_icon_black.png'"
           onmouseout="this.src='registration_icon_white.png'">
    </div>

Answer 3

您可以将图片放在div。

的背景中

DEMO

<div id="box"></div>

将鼠标悬停在div上时会显示不同的图像

3 个答案: