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(); }
...

Кто-нибудь может понять это?

Монреальский веб-дизайн

Answer 1

Рефакторинг можно выполнить с помощью комбинации hover () и множественного селектора .

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