懸停元素A，顯示/隱藏元素B

我有一個<div>元素包含圖像。在該div裏面，我有一個<p>元素，它包含有關圖像的一些信息。我想徘徊包含圖像的<div>，然後顯示或隱藏<p>元素。懸停元素A，顯示/隱藏元素B

<div class="box"> 
    <img src="img/an_039_AN_diskette.jpg" width="310px" height="465px" /> 
    6 Pharma IT 
    <p class="hoverbox">some information</p> 
</div>

在jQuery中有這麼簡單的方法嗎？

來源

2009-07-13 mourique

你能提供的HTML標記你想要做什麼？我有點不清楚。 – 2009-07-13 14:58:38

對不起，我忘了格式化代碼 – mourique 2009-07-13 14:59:38

 $("css_selector_of_img").hover(
     function() { 
     $("css_selector_of_p_element").show(); 
     }, 
     function() { 
     $("css_selector_of_p_element").hide(); 
     } 
    );

見http://docs.jquery.com/Events/hover

來源

2009-07-13 14:59:42 synhershko

我在哪裏放置？當我將它寫在document.ready部分的頭部時，它只會打破我的其餘部分。 – mourique 2009-07-13 15:02:43

將它包圍，，位於頁面末尾，位於之前，jQuery與使用document.ready平行。 – synhershko 2009-07-13 20:32:56

下會匹配所有的圖片，並針對具有標籤的第一個同級P.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("div.box img").hover(
     function(){$(this).siblings("p:first").show();}, 
     function(){$(this).siblings("p:first").hide();} 
    ); 
}); 
</script> 

<div class="box"> 
    <img src="somefile.jpg" /> 
    <p>This text will toggle.</p> 
</div>

來源

2009-07-13 15:00:49 Sampson

$('#divwithimage').hover(
     function(){$('#ptag').show();}, //shows when hovering over 
     function(){$('#ptag').hide();} //Hides when hovering finished 
);

來源

2009-07-13 15:01:25 AutomatedTester

<div class="box"> 
    <img ... /> 
    <p class="hoverbox">Some text</p> 
</div> 

<script type="text/javascript"> 
    $('div.box img').hover(
     function() { $('div.box p.hoverbox').show(); }, 
     function() { $('div.box p.hoverbox').hide(); } 
    ); 
</script>

來源

2009-07-13 15:04:02

懸停元素A，顯示/隱藏元素B

回答

相關問題