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 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?
The following will match all of your images, and target their first sibling having the tag 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>
$("css_selector_of_img").hover(
function () {
$("css_selector_of_p_element").show();
},
function () {
$("css_selector_of_p_element").hide();
}
);
See http://docs.jquery.com/Events/hover
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With