我有一个包含图片的<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>
在jQuery中有一种简单的方法吗?
答案 0 :(得分:7)
以下内容将匹配您的所有图片,并定位他们的第一个兄弟标记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>
答案 1 :(得分:6)
$("css_selector_of_img").hover(
function () {
$("css_selector_of_p_element").show();
},
function () {
$("css_selector_of_p_element").hide();
}
);
答案 2 :(得分:3)
$('#divwithimage').hover(
function(){$('#ptag').show();}, //shows when hovering over
function(){$('#ptag').hide();} //Hides when hovering finished
);
答案 3 :(得分:1)
<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>