jQuery не изменяет фон

#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');
  }
);