jQuery 向下钻取选择器？

Question

我编写了这段代码，可以对添加“simplehover”类的任何图像产生滚动悬停效果:

    //rollover effect on links 
    $(".simplehover").mouseover(function () {
        $(this).attr("src", $(this).attr("src").replace("-off.", "-on."));
    }).mouseout(function () {
        $(this).attr("src", $(this).attr("src").replace("-on.", "-off."));
    });

<img src="slogan.gif" class="simplehover" />

如果您将“simplehover”类添加到周围的元素，我会尝试让它工作:。 (对于 ASP.net asp:HyperLink 标记特别有用，它会在超链接内自动生成 IMG 标记。

<a href="#" class="simplehover"> <img src="slogan.gif" /> </a>

如果我将选择器更改为: $(".simplehover img") ，它将起作用，但它在 senario #1 中不再起作用。

我尝试过这个，但没有成功:

$(".simplehover").mouseover(function () {
if ($(this).has('img')) { $(this) = $(this).children(); }
...

有人能解决这个问题吗？

Montreal Web Design

Answer 1

您可以使用 hover() 的组合进行重构方法和multiple selector .

$("a.simplehover img, img.simplehover").hover(function () {
    $(this).attr("src", $(this).attr("src").replace("-off.", "-on."));
}, function() {
    $(this).attr("src", $(this).attr("src").replace("-on.", "-off."));
});

<img src="slogan.gif" class="simplehover" />