Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Show Hide text on image rollover

7:23 pm on Sep 28, 2012 (gmt 0)

New User

10+ Year Member

joined:Apr 13, 2003
posts: 5
votes: 0


I'm using the following javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
$(document).ready(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');

//make the collapse content to be shown or hide
var toggle_switch = $(this);



to expand a div and show some text on the rollover of an image.

<a href="#collapse1" class="nav-toggle"><img src="images/image_name.jpg" width="298" height="59" alt="image">

<div id="collapse1" style="display:none">my text that is revealed is this section.....</div>

It works well, but using the above code the revealed text above stays in place until you mouseover the image again upon which it is hidden.

I would like to change this so that you still mouseover the image to reveal the text, but as soon as you mouseout it is hidden.

eg. you don't have to mouseover it again to close it.

I'm sure all I need is a simple tweak to the code above, so if you can help asap it would be appreciated!
2:26 am on Sept 29, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 748

You need a second piece using mouseout (or whatever jquery calls it). I've got something functionally equivalent in vanilla javascript and it needed two pieces:

"onmouseover" to do its stuff while the mouse is over the element
"onmouseout" to stop when the mouse moves away
10:32 am on Oct 3, 2012 (gmt 0)

New User

5+ Year Member

joined:Oct 3, 2012
votes: 0

you can use hoverevent provided by jquery for both events.


[edited by: engine at 11:03 am (utc) on Oct 3, 2012]
[edit reason] no sig files, thanks [/edit]