將鼠標懸停在圖像上並在該圖像上顯示鏈接

我以如下所示由循環生成的方式顯示div。
我想顯示quickdiv懸停在image或懸停over the div，但是當我將它懸停時，它顯示所有其他div的div。請提供任何建議。將鼠標懸停在圖像上並在該圖像上顯示鏈接

<div class="box-product"> 
    <div> 
     <div class="image"><a href="">test 1<img src="image.jpg" /></a> 
     </div> 
     <div class="quick" style="display: none;">Quick Look</div> 
    </div> 
    <div> 
     <div class="image"><a href="">test 2<img src="image.jpg" /></a> 
     </div> 
     <div class="quick" style="display: none;">Quick Look</div> 
    </div> 
    <div> 
     <div class="image"><a href="">test 3<img src="image.jpg" /></a> 
     </div> 
     <div class="quick" style="display: none;">Quick Look</div> 
    </div> 
    <div> 
     <div class="image"><a href="">test 4<img src="image.jpg" /></a> 
     </div> 
     <div class="quick" style="display: none;">Quick Look</div> 
    </div> 
</div>

這是我的jQuery

$(function() { 
    $(".box-product div").each(function() { 
     $(".image").mouseenter(function() { 
      $(".quick").show(); 
     }); 
     $(".image").mouseout(function() { 
      $(".quick").hide(); 
     }); 
    }); 
});

我創建了一個jsfidle其中明確定義了什麼是我的問題。

來源

2013-05-22 Husnain Ahmed

您是否考慮使用純CSS？看到這裏：http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css – Medo42

與** CSS做**是非常好的選擇。 –

試試這個腳本：

$(function() { 
    $(".image").each(function() { 
     $(this).mouseenter(function() { 
      $(this).parent().find(".quick").show(); 
     }); 
     $(this).mouseout(function() { 
      $(this).parent().find(".quick").hide(); 
     }); 
    }); 
});

來源

2013-05-22 07:45:23

嘗試以下操作：

$('div.image').each(function(){ 
     $(this).on('hover',function(){ 
      $('div.quick').css('display','none'); 
      $(this).next().css('display','block'); 
     });      
});

http://jsfiddle.net/5unMB/18/

來源

2013-05-22 07:38:42 DextrousDave

真的很有幫助的答案。我做了與CSS和它的工作就像我的願望:)謝謝你的幫助。 –

這是一種享受 – DextrousDave

我認爲你需要改變你的HTML包含嵌套的div：

<div class="box-product"> 
<div class="image"><a href="">test 1<img src="image.jpg" /></a> 
<div class="quick" style="display: none;"> 
    Quick Look 
    </div> 
</div> 

<div class="image"><a href="">test 2<img src="image.jpg" /></a> 
<div class="quick" style="display: none;"> 
    Quick Look 
    </div> 
</div> 

<div class="image"><a href="">test 3<img src="image.jpg" /></a> 
<div class="quick" style="display: none;"> 
    Quick Look 
    </div> 
</div> 

<div class="image"><a href="">test 4<img src="image.jpg" /></a> 
<div class="quick" style="display: none;"> 
    Quick Look 
    </div> 
</div> 
</div>

然後你可以在下面的方式改變你的jQuery ：

$(function() { 
    $(".box-product div").each(function() { 
     $(".image").mouseenter(function(){ 
      $(this).find('.quick').show(); 
     }); 
     $(".image").mouseout(function(){ 
      $(this).find('.quick').hide(); 
     }); 
    }); 
    });

看的jsfiddle：http://jsfiddle.net/husnainahmed/5unMB/13/

來源

2013-05-22 07:41:45

看到的變化，我認爲你問一下一個

$(function() { 
$(".box-product div").each(function() { 
    $(".image").mouseenter(function(){ 
     $(this).parents().eq(0).find(".quick").show(); 
    }); 
    $(".image").mouseout(function(){ 
     $(this).parents().eq(0).find(".quick").hide(); 
    }); 
});});

http://jsfiddle.net/5unMB/19/

來源

2013-05-22 10:16:54

將鼠標懸停在圖像上並在該圖像上顯示鏈接

回答

相關問題