如何使用 jQuery 更改带有悬停.jpg 的图像？

Question

我有以下输出。

<ul id='centrelist'>
<li class="centreicon"><a href="admin/manage_mycentre/22"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre1.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/22">Aktiv trening Arendal</a></div></a></li>
<li class="centreicon"><a href="admin/manage_mycentre/16"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre2.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/16">Aktiv trening Blindheim</a></div></a></li>
<li class="centreicon"><a href="admin/manage_mycentre/17"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre3.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/17">Aktiv trening Eid</a></div></a></li>
...

现在，当我悬停任何图像时，我想用jquery将其更改为hover.jpg。

我有以下内容，但它不起作用。

$(function() {
    $(".centreimg")
        var orgimg = $(this).attr("src");
        .mouseover(function() {
            var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg";
            $(this).attr("src", hoverimg);
        })
        .mouseout(function() {
            $(this).attr("src", orgimg);
        });
});

Answer 1

只是一个小修正

$(function() {
    $(".centreimg").mouseover(function() {
            var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg";
            var orgimg = $(this).attr("src");

            $(this).attr("src", hoverimg);
            $(this).attr("title", orgimg);
        })
        .mouseout(function() {
            $(this).attr("src", $(this).attr("title"));
        });
});

你必须将数据存储在对象中

Answer 2

jQuery 代码使用 data() 方法，使它变得更简单。

$('.centreimg').hover( 
function() {
    $(this).data('src',$(this).attr('src'));
    $(this).attr('src', 'hover.jpg' ); //or hoverimg if it is declared
},
function(){
    $(this).attr('src', $(this).data('src') );
});