Hi
I've been trying to figure out how I can use jQuery to reveal a div which contains a title and semi transparent black background when I rollover one of the images on this test page -
For each image I have the following html structure -
<div class="holder"><div class="photo"><a href="http://acaibeads.com.au/" target="_blank"><img class="size-full wp-image-414 alignleft" title="Acai Beads | Melko group Melbourne" src="http://easynow.com.au/wp-content/uploads/2012/04/acai.jpg" alt="" width="280" height="200" /></a></div>
</br>
<div class="rollover"><h4>Acai Beads</h4></div>
</div>
</div>
I have the .rollover hidden via css and want it to display when the cursor hovers over then hide itself again when the cursor leaves that particular photo. I have the following jQuery formatted for wordpress -
<script type="text/javascript">
jQuery('.photo').mouseenter(function(){
jQuery('.rollover').css('display','visible');
});
</script>
But it isn't working properly. How can I set it up so the mouse enter will reveal the roll over div for the photo the cursor is on?
Any help would be appreciated
Thanks
Tom