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.

Answer 1

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/