jQuery悬停链接交换图像

Question

如果用户将鼠标悬停在链接上,图像将与最后带有"-on"的图像交换,我想执行以下操作.

但是当我悬停标签时,如何才能在图像上获得交换？

HTML代码:

<div>
    <a href="#">
        <img src="image.jpg" alt="" />
        Here some caption
    </a>
</div>

我无法将图片网址放在标题中...

Answer 1

$(function () {
    $('a img').hover( function () {
        $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '-on.jpg') );
    });
});

阅读jQuery文档replace和attr.

Answer 2

改变src你的形象只是attr:

$('img').attr("src", "image2.jpg");

你需要使用悬停:

$("a").hover(
function() {
    $(this).find('img').attr("src", "image2.jpg");
},
function() {
    $(this).find('img').attr("src", "image.jpg");
}
);