Question

我在使用jQuery更改属性时遇到问题

JS:

$("#but1").hover(function()
    {
        $(this).attr('src', 'css/img1.jpg');
    }, function()
    {
        $(this).attr('src', 'css/img2.jpg');
});

HTML:
<body>
     <div id = "but1" class = "button"><img src ="css/img1.jpg"/></div>  
</body

在我的实际代码中，我为每个单独的按钮创建了一个类，并将所有属性放在那里，并用不同的ID分隔每个按钮。

我希望能够将鼠标悬停在img2上的每个按钮（例如“but1”）的背景图像更改为img2，当我的鼠标离开时，它会变回img1。

由于

编辑：jQuery代码的SOP：

<script type="text/javascript">
    $(document).ready( $("#but1").hover(function()
    {
        $(this).attr('src', 'css/facebook.png');
    }, function()
    {
        $(this).attr('src', 'css/facebookbw.png');
    })  );
</script>

Answer 1

你接近你的javascript。尝试将脚本更改为以下内容：

$("#but1").hover(function()
{
    $(this).css("background-color", "blue");
}, function()
{
    $(this).css("background-color", "red");
});

Answer 2

你想要这样，对吗？演示：https://jsfiddle.net/yeyene/mepygo30/2/

确保为jquery添加js链接，并在里面调用函数..

$（document）.ready（function（）{...}）;

<强> JQUERY

$(document).ready(function () {
    $("#but1").hover(function () {
        $(this).attr('src', 'http://www.office.xerox.com/assets/images/xog/pages/smb/tips/red_square.jpg');
    }, function () {
        $(this).attr('src', 'http://www.iconsdb.com/icons/preview/royal-blue/square-rounded-xl.png');
    });
});

如何使用jQuery在悬停时将div的图像源与另一个图像交换

2 个答案: