IF ELSE Hover оператор работает только на втором наведении - PullRequest
Новая
       23

IF ELSE Hover оператор работает только на втором наведении

0 голосов
/ 10 августа 2011

У меня есть меню, в котором при наведении на изображение изображение меняется, если к изображению не присоединен активный класс.Моя проблема в том, что изображение изменяется только во ВТОРОМ РУЛОНЕ ЗАДНЕГО ПЕРВАЯ.Любые идеи, почему это так. 

$("#contact").hover(function () {
    if ($("#contact").is(".active")) {
        $("#contact img").attr("src","Images/Menu/contact_hover.png" )
    }
    else {
        $("#contact").hover(function () {
                $("#contact img").attr("src","Images/Menu/contact_hover.png" )
            },
            function() {
            $("#contact img").attr("src","Images/Menu/contact.png" )
         });
    }
});

Ответы [ 4 ]

2 голосов
/ 10 августа 2011

Вы не должны делать это с jQuery, в этом действительно нет необходимости. Пожалуйста, прочитайте CSS Image sprites и используйте селектор css hover, как это: 

#contact {
    background: url(/url/of/img) no-repeat;
}

#contact:hover { 
    background-position: ; // Change to desired image
}

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

0 голосов
/ 10 августа 2011

Вы должны упростить свой код - попробуйте это 

$("#contact").hover(function () {
    if (!$("#contact").hasClass("active")) {
        $("#contact img").attr("src","Images/Menu/contact_hover.png" )
    }
},
function() {
   if (!$("#contact").hasClass("active")) {
        $("#contact img").attr("src","Images/Menu/contact.png" )
   }
});
0 голосов
/ 10 августа 2011

Рабочий пример на: http://jsfiddle.net/HNGMT/

** В примере используются два div, чтобы продемонстрировать разницу между одним с классом active и одним без.HTML-код курса также предназначен исключительно для демонстрационных целей.И селектор jQuery для класса contact будет изменен для отображения селектора идентификатора.

HTML: 

<div class="contact"><img src="/contact.png" alt="contact inactive" /></div>
<div class="contact active"><img src="/contact.png" alt="contact active" /></div>

JavaScript: 

$(".contact").hover(function () {
    $(this).find("img").attr({src:"contact_hover.png", alt:"contact hover"});
}, function(){
    var ele = $(this);
    if(!ele.hasClass("active")){
        ele.find("img").attr({ src:"contact.png", alt:"contact inactive"});
    }
});
0 голосов
/ 10 августа 2011

Это потому, что вы не делаете второй вызов hover, пока блок else не запустится в первый раз. Настройте все свои обработчики событий на $(document).ready, и все будет хорошо.

...