homepage Welcome to WebmasterWorld Guest from 54.211.34.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Show Hide text on image rollover
steve55

10+ Year Member



 
Msg#: 4501305 posted 7:23 pm on Sep 28, 2012 (gmt 0)

Hi


I'm using the following javascript


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').mouseover(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);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){

}
});
});

});
</script>


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!

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4501305 posted 2:26 am on Sep 29, 2012 (gmt 0)

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
and
"onmouseout" to stop when the mouse moves away

Alok07



 
Msg#: 4501305 posted 10:32 am on Oct 3, 2012 (gmt 0)

you can use hoverevent provided by jquery for both events.

Regards
ALok

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved