Question

我想要一个带有img元素的Jquery函数，当它被悬停时，它会替换img，如下所示：myimage.png替换为myimage2.png

这就是我提出的但是它不起作用：

        $("#menu img").hover(function(){
        var split = $(this).attr("src").split(".png");
        $(this).attr("src", split[0]+"2.png");
    }, function(){
        var split = $(this).attr("src").split(".png");
        $(this).attr("src", split[0]+".png");
    });

我确信退伍军人可以提出更好的方法，所以请。

Answer 1

您的第二个函数根本不会更改src属性，因为您正在执行的操作是删除“.png”位，然后重新添加它。您还需要删除“2”。我猜您可以将split('.png')更改为split('2.png')。

但在大多数情况下，CSS是一个更好的解决方案。除非您确实想要显示图像（例如在图库中），否则您可以在其他元素上设置背景图像并在悬停时交换它们。更好的是，使用图像精灵将HTTP请求降至最低：

#menu a {
    background: url(menu.png) no-repeat; /* menu.png contains ALL the images used in the menu */
    display: block;
    width: 80px;
    height: 20px;
    text-indent: -1000000px; /* Remove text */
}

#menu a:hover {
    background-position: left -20px;
}

Answer 2

希望这有帮助，如果您有任何问题，请与我联系。

jsFiddle（http://jsfiddle.net/ZWxEg/12/）

<script type='text/javascript'>

    var split = new Array();

    split[0] = "http://www.google.com/logos/2012/sundback12-hp.jpg";
    split[1] = "http://www.google.com/logos/2012/sovereignty12_hp.jpg";

    $(document).ready(function()
    {
        $(".button").hover( function ()
        {
             $(this).attr( "src" , split[1] );
        },
        function ()
        {
             $(this).attr( "src" , split[0] );
        });
    });
</script>

<div id="menu">
    <img src="http://www.google.com/logos/2012/sundback12-hp.jpg" alt="My button" class="button" />
</div>

JQuery：悬停时动态图像替换？

2 个答案: