jquery - 当使用 jQuery 悬停整个 li 时，如何更改 li a img 内的图像？

Question

我正在尝试使用这个简单的 jquery 脚本更改列表项内 anchor 内的图像(li a img)，但仅在鼠标悬停时更改图像，但如果将鼠标悬停在整个列表项中，我需要更改图像里。

$(".overview li a img").hover(
    function() { this.src = this.src.replace("_off", "_on"); },
    function() { this.src = this.src.replace("_on", "_off"); }
);

Answer 1

更改选择器以定位 li，然后在处理程序中找到 img 子项并修改其源:

$(".overview li").hover(
    function() {
        $(this).find("img")[0].src = $(this).find("img")[0].src.replace("_off", "_on");
    }, function() {
        $(this).find("img")[0].src = $(this).find("img")[0].src.replace("_on", "_off");
    });    
});

如果您愿意，您可以将该行为压缩到 .hover 的单个函数参数中(尽管可读性稍差):

$(".overview li").hover(function () {
    var img = $(this).find("img")[0];
    img.src = (img.src.indexOf("_off") > -1) ? 
        img.src.replace("_off", "_on") : img.src.replace("_on", "_off");
});