#javascript #jquery
#javascript #jquery
Вопрос:
Мой HTML-код:
<ul class="nav">
<li class="nav-one" ><span class="righttab activeright">amp;nbsp;</span><span class="lefttab activeleft">amp;nbsp;</span><a href="#featured" class="current">Featured</a></li>
<li class="nav-two" ><span class="righttab" id="rightnav2">amp;nbsp;</span><span class="lefttab" id="leftnav2">amp;nbsp;</span><a href="#core" >Core</a></li>
<li class="nav-three" ><span class="righttab" id="rightnav3">amp;nbsp;</span><span class="lefttab" id="leftnav3">amp;nbsp;</span><a href="#jquerytuts" >jQuery</a></li>
<li class="nav-four last" ><span class="righttab" id="rightnav4">amp;nbsp;</span><span class="lefttab" id="leftnav4">amp;nbsp;</span><a href="#classics" >Classics</a></li>
</ul>
и мой код jQuery является:
jQuery(".nav-two").hover(function() {
$('#rightnav2').css("background-image", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-right.jpg)");
$('#leftnav2').css("background-image", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-left.jpg)");
});
Предполагается, что это изменит фоновое изображение при переносе с помощью мыши. Кто-нибудь может сказать мне, что я делаю не так?
Комментарии:
1.Когда вы передаете одну функцию в
.hover()
, этот код выполняется наmouseenter
иmouseleave
. Вероятно, это не то, что вы хотите, чтобы произошло в данном случае. Кроме того, вы уверены, что URL-адреса указаны правильно?2. Да, функция запущена, и URL-адреса указаны правильно. В mousenter или mouseleave ничего не меняется
3. какова ширина и высота изображений?
4. Проблема заключалась в том, что я не могу использовать $, поскольку он конфликтует, и мне нужно было заменить его на jQuery, чтобы он работал. Итак, я собираюсь наградить Ника за демонстрацию того, как в полной мере использовать функцию наведения.
Ответ №1:
Наиболее распространенным использованием .hover
является передача ему двух функций: первая для ввода мышью, а вторая для выхода мыши. Если вы передаете только одну функцию, как у вас там, то она выполняется для обоих событий, и ваш обработчик должен запросить объект Event, чтобы решить, что делать. Итак, если вы намеревались, чтобы фоновое изображение менялось при наведении курсора мыши, а затем возвращалось при наведении курсора мыши, тогда вам следует предоставить вторую функцию, устанавливающую фоновое изображение на ''
.
Комментарии:
1. Как бы я определил две функции для наведения?
2.
.hover(function () { /* your mouse over function */ }, function () { /* your mouse out function */ })
. Кроме того, есть некоторая онлайн-документация, которую вы знаете 😉 api.jquery.com/hover/#hover1
Ответ №2:
jQuery(".nav-two").hover(function() {
$('#rightnav2').css("backgroundImage", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-right.jpg)");
$('#leftnav2').css("backgroundImage", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-left.jpg)");
});
Возможно, вам потребуется заменить все ‘-‘ в атрибутах css эквивалентом camel case.
т.е. фоновое изображение становится фоновым изображением
Комментарии:
1. jQuery нормализует это для вас.
Ответ №3:
Попробуйте создать класс CSS для каждого фона
$(".nav-two").bind({
mouseenter: function(){
$('#leftnav2').addClass('hover1');
$('#rightnav2').addClass('hover2');
},
mouseleave: function(){
$('#leftnav2').removeClass('hover1');
$('#rightnav2').removeClass('hover2');
},
});
или
$(".nav-two").hover(
function () {
$('#leftnav2').addClass('hover1');
$('#rightnav2').addClass('hover2');
},
function () {
$('#leftnav2').removeClass('hover1');
$('#rightnav2').removeClass('hover2');
}
);