在導航懸停上jQuery圖像交換

我想在用戶懸停在菜單項上時使用jQuery在導航上進行圖像交換。它需要根據元素的高度加載不同的圖像。在導航懸停上jQuery圖像交換

到目前爲止，我有這個，它的工作原理在一定程度上：

$(document).ready(function() { 
    $('a.mainlevel').hover(function() { 
     if ($(this).height() > 15) { 
      $('a.mainlevel').mouseenter(function() { 
       $('a.mainlevel:hover').css('background-image','url(/images/menuHoverBig.gif)'); 
      }); 
      $('a.mainlevel').mouseleave(function() { 
       $('a.mainlevel').css('background','#505051'); 
      }); 
     } 
     else { 
      $('a.mainlevel').mouseenter(function() { 
       $('a.mainlevel:hover').css('background-image','url(/images/menuHover.gif)'); 
      }); 
      $('a.mainlevel').mouseleave(function() { 
       $('a.mainlevel').css('background','#505051'); 
      }); 
     } 
    }); 
});

我遇到的問題是，如果我將鼠標懸停在尺寸X的元素，它加載正確的圖像，但後來當我徘徊大小爲Y的元素，它會爲X加載圖像。如果您再將鼠標懸停在Y上，則它可以正常工作。回到X，Y圖像加載直到第二次懸停。

我對jQuery不太瞭解，所以它可能很明顯，但我無法解決它。

Cheers

來源

2012-04-03 toby_lh

您應該將選擇器更改爲$（this）。而且你不需要mouseenter結束mouseleave功能

$((function() { 
        $('a.mainlevel').hover(function() 
        { 
        var _image = "url(/images/menuHover.gif)"; 
        if ($(this).height()> 15){ 
         _image = "url(/images/menuHoverBig.gif)"; 
        $(this).css("backround",_image); 
       }, 
       function(){ 
         $(this).css('background','#505051'); 

       }); 


       });

來源

2012-04-03 14:45:56 Yorgo

嗨@Yorgo 感謝您的回覆。嘗試你的解決方案「給失蹤）參數列表後」我似乎無法解決它。 – 2012-04-03 16:00:51

我修好了，我忘記了）字符 – Yorgo 2012-04-03 19:34:17

我認爲問題是，你的hover()的mouseenter和mouseleave函數內分配mouseenter和mouseleave處理的事實，並要設置時也引用所有.mainlevel元素css，而不僅僅是當前元素。試試這個：

$(document).ready(function() { 
    $('a.mainlevel').hover(
     function() { 
      var $el = $(this);  
      var bgImage = 'url(/images/menuHover.gif)'; 
      if ($el.height() > 15) 
       bgImage = 'url(/images/menuHoverBig.gif)');     
      $el.css('background-image', bgImage); 
     }, 
     function() { 
      $(this).css('background', '#505051'); 
     } 
    ) 
});

來源

2012-04-03 14:46:15

在導航懸停上jQuery圖像交換

回答

相關問題