Javascript mouseover function

Question

I have this code

This is the script in my head

 <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#hmenu li a").hover( function () { if ($("#hmenu li a").val == "Work") { alert ('halla') } }, function () { $(this).removeClass("active"); } ); }); </script>

This is the HTML part

<div id="headd"> <img src="logoname.png"/> </div> <div id="ll"> <p>My home, the front page and the main page</p> </div> <img id="da" src="logo.png" /> <div id="line"> <img src="rr.gif" /> </div> <ul id="hmenu"> <li><a class="active" href="#">HOME</a></li> <li><a href="#">WORK</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul>

I want to change the text in this area: "#ll p" whenever the user hover on the anchor tags.

For example. When the user hover on anchor tags which has a content of "HOME" then the JavaScript compare it via if and else (I don't know if there is another way but I'm open on any suggestion) so this is it: if the #hmenu li a value is equal to Home then then #ll p content should be change into "you hover the work anchor" and so the rest.

Add classes/ids to your menu items. It will make this much easier. — Blender
– Blender, Commented Apr 7, 2012 at 6:52

alexg · Accepted Answer · 2012-04-07 06:56:28Z

1

How about

$('#hmenu li').hover(function() { $('#ll p').text('you hover the '+$(this).text()+' anchor'); }

answered Apr 7, 2012 at 6:56

alexg

3,0743 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jay · Accepted Answer · 2012-04-07 08:12:24Z

If you want to add text and then return to original text, you can store your value in data tag. Look at this sample:

http://jsfiddle.net/PjJfk/

Sean Hogan · Accepted Answer · 2012-04-07 13:40:27Z

Adding to @alexg and @Jay:

It sounds like you want the functionality of the title attribute but, instead of a popup, the title text goes to a predefined box.

I would recommend using the title attr because this will still work if js is disabled. Then I suppose you could use hover (mouseenter / mouseleave) actions like:

mouseenter: remove the title from the link but use it for the contents of '#ll p' mouseleave: restore the original title to the link and the original contents of #ll p

I'm not really a jQuery guy, but something like :

$(function() { var text, title; $('#hmenu li a').hover( function() { var $p = $('#ll p'), $a = $(this); text = $p.text(); title = $a.attr('title'); $a.attr('title',''); $p.text(title); }, function() { $('#ll p').text(text); $(this).attr('title', title); } ) });

#hmenu becomes

<ul id="hmenu"> <li><a class="active" href="#" title="My home, the front page and the main page">HOME</a></li> <li><a href="#" title="Glad I'm not there now">WORK</a></li> <li><a href="#" title="You really have to see this">PORTFOLIO</a></li> <li><a href="#" title="I'm interesting once you get to know me">ABOUT</a></li> <li><a href="#" title="Shazam">CONTACT</a></li> </ul>

See http://jsfiddle.net/heey3/

Collectives™ on Stack Overflow

Javascript mouseover function

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related