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" />

jQuery深入选择器？

1 个答案: