Функция наведения JQuery не работает должным образом

У меня есть три изображения (например, tab1.jpg) вместе с изображениями курсора мыши (например, tab1m.jpg), которые я пытаюсь свести к одной функции наведения JQuery. Прежде чем я использовал:Функция наведения JQuery не работает должным образом

$('#tab1').hover(function(){ 
    $(this).attr("src", 'images/tab1m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab1.jpg'); 
}); 
$('#tab2').hover(function(){ 
    $(this).attr("src", 'images/tab2m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab2.jpg'); 
}); 
$('#tab3').hover(function(){ 
    $(this).attr("src", 'images/tab3m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab3.jpg'); 
});

который работал, но был излишне длинным и подробным. Поэтому я попытался изменить его:

$('.navimg').hover(function(){ 
    var tab = ($(this).attr('id')).substring(3,4); 
    $(this).attr('src','images/tab'+tab+'m.jpg'); 
}, 
function(){ 
    $(this).attr('src','images/tab'+tab+'.jpg'); 
});

, которая не работает - когда я мыши на изображение, оно изменяется успешно, но не возвращается обратно к исходному (tab1.jpg/tab2/tab3) изображения. Может ли кто-нибудь сказать мне, почему это происходит? Благодаря!

источник

2012-02-14 Tim Aych

Можете ли вы разместить соответствующий HTML-код? Кроме того, вы можете, вероятно, добиться такого же эффекта с помощью CSS и вообще пропустить jQuery. – arb

Он не возвращается к исходному, becuase в вашей второй функции вкладка переменной Undefine.

можно добавить

var tab = ($(this).attr('id')).substring(3,4);

в вашей второй функции, чтобы решить проблему

источник

2012-02-14 13:50:44 Nettogrof

Ах! Я знал, что это просто. Спасибо!!! –

Это две различные функции с двумя различными областями. Вы не можете получить доступ к переменной, объявленной в одной из них во второй.

сделать вашу декларацию var tab вне парения(), так он доступен в обеих внутренних функциях:

var tab = ''; 

$('.navimg').hover(
    function(){ 
     tab = ($(this).attr('id')).substring(3,4); 
     $(this).attr('src','images/tab'+tab+'m.jpg'); 
    }, 
    function(){ 
     $(this).attr('src','images/tab'+tab+'.jpg'); 
    } 
);

источник

2012-02-14 13:48:23

Я нашел, что мне нужна вкладка var в обеих функциях, как будто я держу ее за пределами изображения, возвращаясь к «без изображения», а не к оригиналу. –

Как насчет использования некоторых CSS?

#tab1{background-image: url(/images/tab1m.jpg)} 
#tab1.hover{background-image: url(/images/tab1.jpg)} 
#tab2{background-image: url(/images/tab2m.jpg)} 
#tab2.hover{background-image: url(/images/tab2.jpg)} 
#tab3{background-image: url(/images/tab3m.jpg)} 
#tab3.hover{background-image: url(/images/tab3.jpg)}

тогда ваш JQuery парения может быть:

$('.canHover').hover(function(){ 
    $(this).addClass('hover'); 
}, 
function(){ 
    $(this).removeClass('hover'); 
});

то в каждом из вашей 'вкладки' добавить 'canHover' класса

<div id="#tab1" class="canHover">Tab 1</div> 
<div id="#tab2" class="canHover">Tab 2</div> 
<div id="#tab3" class="canHover">Tab 3</div>

с использованием выше CSS и «canHover ", вы можете добавить функцию зависания в любой элемент, который вы хотите.

источник

2012-02-14 14:03:56 harag

Зачем использовать javascript, просто псевдо-селектор css ': hover' –

Вы можете сказать, я забыл о псевдоселекторе': hover' – harag

Функция наведения JQuery не работает должным образом

ответ

Смежные вопросы