悬停元素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

回答

相关问题