jQuery 悬停元素 A，显示/隐藏元素 B
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1119956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hover element A, show/hide Element B
提问by mourique
I have a <div>element containing an image. Inside that div, I have a <p>element which holds some information about the image. I want to hover the <div>containing the image and then show or hide the <p>element.
我有一个<div>包含图像的元素。在那个 div 中，我有一个<p>元素，其中包含有关图像的一些信息。我想悬停<div>包含图像，然后显示或隐藏<p>元素。
<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>
Is there an easy way to do so in jQuery?
在 jQuery 中有没有一种简单的方法可以做到这一点？
回答by Sampson
The following will match all of your images, and target their first sibling having the tag P.
以下将匹配您的所有图像，并定位其第一个带有标签 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>
回答by synhershko
$("css_selector_of_img").hover(
function () {
$("css_selector_of_p_element").show();
},
function () {
$("css_selector_of_p_element").hide();
}
);
回答by AutomatedTester
$('#divwithimage').hover(
function(){$('#ptag').show();}, //shows when hovering over
function(){$('#ptag').hide();} //Hides when hovering finished
);
回答by Brad Gignac
<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>
