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';

Answer 2

<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>

Answer 3

可能最好的方法是使用css并根据悬停属性设置元素的背景图像。

Answer 4

如果您可以在您的应用程序中使用jQuery，那么它将非常简单。在鼠标悬停按钮事件时只需交换背景图像。以下示例代码为div元素执行： -

<div class="title"/>

 $(document).ready(function () {
            $('div.title').mouseover(function () {
                $(this).css("background-image", "url('Forest Flowers.jpg')");
            });
        });

Answer 5

使用a标记来包装图像。

<hmtl>
<head>
    <style type="text/css">
        a.button{
            background: url('images/1.png');
                            display:block;
                            width: *width*;
                            height: *height*;
        }

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

修改：我刚才意识到您正在尝试替换图片下的背景图片....

您拥有的一个选项是使用javascript。但是如果你只想使用CSS而且想要使用这个图像作为控件，那么上面编辑的解决方案是好的。

Answer 6

使用javascript执行此操作。使用 onmouseover 和 onmouseout 事件来处理此问题。

如果你可以使用jQuery，那么你可以使用悬停事件。

$("img.button").hover(function(){
    $(this).attr("src","path of image on mouse over");
},
function(){
    $(this).attr("src","path of image on mouse out");
});

Answer 7

我使用了h1标签。我在IE8，Firefox，GoogleChrome中测试了以下代码并且它正常工作，我们只需要正确添加doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
    background: url('images/1.jpg');
    height: 400px;
    width: 400px;
}

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

Answer 8

图像通常没有背景图像。使用不同的元素，非相对路径也可能是一个好主意。

Answer 9

按钮没有悬停状态。您可能想尝试A（链接）标签，并在那里设置背景。

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

9 个答案: