將鼠標懸停在div上並使用jQuery更改兩個圖像？

Question

我想盡可能地將舊網站的功能複製爲精簡版，並且我遇到了.hover和.each的問題。此時，它將在mouseover上交換圖像，但出於某種原因不會在mouseout上交換。我知道這是與語法有關的東西，但是當我漸漸感冒時，我的大腦並沒有抓住它。

相關代碼：

<script> 
(function($) { 
    $(".home-center").hover(function(){ 
     $("img", this).each(
      function() { 
       $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png")); 
      }, 
      function() { 
       $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png")); 
      } 
     ); 
    }); 
})(jQuery); 
<script> 
<div class="home-center"> 
    <div class="home-right"> 
     <img class="home-icon" src="/images/homepage/home-icon-off.png" /> 
    </div> 
    <div class="home-link"> 
     <img class="home-img" src="/images/homepage/home-downloads-off.png" /> 
    </div> 
</div> 

Answer 1

重複這種最瘦的方法是使用CSS，而不訴諸JavaScript的根本：

<style> 
    .home-center .off { 
    display: inline; 
    } 
    .home-center:hover .off { 
    display: none; 
    } 
    .home-center .on { 
    display: none; 
    } 
    .home-center:hover .on { 
    display: inline; 
    } 
</style> 
<div class="home-center"> 
    <div class="home-right"> 
    <img class="home-icon off" src="/images/homepage/home-icon-off.png" /> 
    <img class="home-icon on" src="/images/homepage/home-icon-on.png" /> 
    </div> 
    <div class="home-link"> 
    <img class="home-img off" src="/images/homepage/home-downloads-off.png" /> 
    <img class="home-img on" src="/images/homepage/home-downloads-on.png" /> 
    </div> 
</div> 

我沒有測試此所以它可能是錯的，但你的想法。

我認爲這至少在IE7 +中可用，但很可能在IE6甚至IE5中。

Answer 2

變化以這樣的：

$(document).ready(function() { 
    $(".home-center").each(
     $(this).hover(function(){ 
      var img = $(this).children('img'); 
      function() { 
       img.attr("src", img.attr("src").replace(/-off.png/, "-on.png")); 
      }, 
      function() { 
       img.attr("src", img.attr("src").replace(/-on.png/, "-off.png")); 
      } 
     ); 
    }); 
}); 

Answer 3

您需要申請的每個函數中..或懸停之外。現在你只提供一個鼠標懸停參數（每個參數），沒有鼠標懸停。

Answer 4

關閉！看起來像一個嵌套問題。這是hover有兩個參數，而不是each：

(function($) { 
$(".home-center").hover(function(){ 
    $("img", this).each(
     function() { 
      $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png")); 
     } 
    ), 
    $("img", this).each(
     function() { 
      $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png")); 
     } 
    ); 
}); 
})(jQuery); 

Answer 5

.hover需要2個ARGS（的mouseenter，鼠標離開）。你只有一個參數。

嘗試類似如下，（請參見下面我替代的解決方案）

(function($) { 
    $(".home-center").hover( 
     function() { //mouseenter 
      $("img", this).each(function() { 
       $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png")); 
      }); 
     }, 
     function() { //mouseleave 
      $("img", this).each(function() { 
        $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png")); 
      }); 
     } 
    ); 
})(jQuery); 

或者我只想實現.mouseenter和.mouseleave來選擇呼叫的簡單數量。

(function($) { 
    $("img", ".home-center").mouseenter(
      function() { //mouseenter 
       $(this).each(function() { 
        $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png")); 
       }); 
      }) 
      .mouseleave(function() { //mouseleave 
       $(this).each(
        function() { 
        $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png")); 
       }); 
      } 
     ); 
})(jQuery);