0

我想要一个带有 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");
    });

我相信退伍军人可以想出一个更好的方法，所以请。

4

2 回答 2

2

您的第二个函数根本不会更改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;
}
于 2012-04-26T00:45:04.243 回答
0

希望这会有所帮助，如果您有任何问题，请告诉我。

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>
​
于 2012-04-26T00:42:05.517 回答