Simple question involving jquery

1

Hi

Im trying to learn using jquery with only a very minimal experience with js, so this might be a trvivial question:

I have a menu where, when a menu item is hovered, i want to show a specific box that displays some info about the menu item, etc when “menuitem1” is hovered, it should display the div containing “heres some info about menuitem1”.

My html looks like this:

<body><ul class="menu">
<li>
<a href="#">menuitem1</a>
</li>
<li>
<a href="#">menuitem2</a>
</li>
<li>
<a href="#">menuitem3</a>
</li></ul>
<div class="info" id="info1">heres some info about menuitem1</div>
<div class="info" id="info2">heres some info about menuitem2</div>
<div class="info" id="info3">heres some info about menuitem3</div>
</body>

and heres the javascript/jquery thingy:

<script type="text/javascript">
$(document).ready(function(){
                           
    $(".menu li").mouseover(function () {
      $("#info1").show("slide", { direction: "left" }, 225);
    });
    
    $(".menu li").mouseout(function () {
      $("#info1").hide();
    });

}); //close doc ready
</script>

I set up an example here:

http://www.hejven.dk/test.html

I hope you guys got some time to spare to make me a very happy person :slight_smile:

Cheers
/Aske