Question

I have an unordered list looking like this

HTML

<div id="pop">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
     </ul>
</div>
<div id="info-1></div>
<div id="info-2></div>

And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.

My initial thought was to create one script per each item… but that seems a bit thick considering the functionality of js.

Javascript

$(function(){
     $('pop a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

So my question is of course, how can I make this script to work for all items.

Answer 1

you’ve binded an hover event on all a tags inside pop element (though you have syntax error, you should always add ‘#’ when addressing an element by id) and you don’t have them
what you”re looking for is :

$('#pop li').hover(function() {

});