css - Showing/hiding content with jQuery -

css - Showing/hiding content with jQuery -

i have content in div needs displayed when have specific element in page.

this css code:

.my-div { display: none }

this jquery code:

$(document).ready(function(){ $('.show-div').hover(function() { $('my-div').show(); }); });

and html:

<div class="my-div"> <p>hello world</p> </div> <a href="#" class="show-div">show content</a>

it works fine except i'm not sure how hide content 1 time again upon moving mouse away "show content" link. there sort of "unhover" method?

$().hover() supports handlerin , handlerout parameters:

$(document).ready(function(){ $('.show-div').hover(function() { $(this).show(); }, function() { $(this).hide(); }); });

jquery css hover hide show