css - 当我将鼠标悬停在图像上时,为什么我的图像没有变化?

标签 css hover

这是我的 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>

文件存在,但它仍然不起作用。我做错了什么?

最佳答案

标准方法是 CSS:

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

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

imageElement.src = 'selectedButton.jpeg';

关于css - 当我将鼠标悬停在图像上时,为什么我的图像没有变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2573682/

相关文章:

html - Css 标题/文本位置

jquery - CSS3 中的动态蒙版无法正常工作

jquery - 如何像在 Wella.com 上那样在 div 元素上制作悬停渐变?

css - 更改悬停背景的 z-index

html - 使多个 div 适合其父 DIV 高度

css - 当 Chrome 中的 "Inspect Element"显示 CSS 的预期行为但实际结果不同时,有什么想法?

css - 制作基于 sass (scss) 的网格 - 如何使用一个声明创建类名列表

html - 使用 CSS 实现纸张翻转过渡

html - 我怎样才能使用列表制作下拉菜单

tabs - 如何在悬停而不是单击时使用 twitter Bootstrap 选项卡?