当我将鼠标移到它上面时,为什么我的图像不会改变？

Question

这是我的HTML.

<html>
    <head>
        <style type="text/css">
            .button {
                background: url('images/1.png');
            }

            .button:hover {
                background: url('images/2.jpg');
            }
        </style>
    </head>
    <body>
        <img class="button" src="images/1.png">
    </body>
</html>

文件存在但仍然无效.我究竟做错了什么？

Answer 1

标准方法是CSS:

input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }

使用JavaScript,您可以覆盖图像的.src:

imageElement.src = 'selectedButton.jpeg';