show and hide list items on hover

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

I'd suggest:

$('#pop li').hover(
    function() {
        $('div.info').eq($(this).index()).show();
    }, function() {
        $('div.info').eq($(this).index()).hide();
    });​

Working with slightly-changed 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 class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>​

JS Fiddle demo .

What I forgot to say is that this will show the .info element that corresponds to the same index as the currently hovered-over li element, so hovering the first li will show the first .info , and so on. So it's dependant on maintaining a predictable relationship between the li and the .info elements.

As an aside, it's possible to replicate this interaction using just CSS, albeit it requires a click rather than a hover event, so long as you amend the li HTML to include a link that points to the id of the relevant div :

<div id="pop">
    <ul>
        <li><a href="#info1">Item 1</a></li>
        <li><a href="#info2">Item 2</a></li>
        <li><a href="#info3">Item 3</a></li>
        <li><a href="#info4">Item 4</a></li>
        <li><a href="#info5">Item 5</a></li>
        <li><a href="#info6">Item 6</a></li>
        <li><a href="#info7">Item 7</a></li>
    </ul>
</div>

<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>​

And the CSS:

.info {
    /* hides by default */
    display: none;
}

.info:target {
    /* shows when targeted */
    display: block;
}

JS Fiddle demo . ​

Incidentally, quoting attributes is optional (though if it's an attribute that contains white-space it must be quoted), but if you quote you must have a quote at both ends of the value you're quoting: <div id="info-1></div> is not valid HTML (since the string isn't closed until the next line at the beginning of the next attribute); use: <div id="info-1"></div> .

And, further, your posted jQuery:

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

This can't work, because:

1. the selector won't match any elements, you're trying to target an a element inside of a pop element (which, obviously, doesn't exist). What you need to do is preface the id with a # (as you do in the next line, so I'm assuming a typo there), to give: $('#pop a') . But,
2. there are no a elements in the #pop element, therefore no events will be, or can be, bound.

If you need to use that form, however, then a couple of adaptations can make it work:

$(function(){
     $('#pop li').hover(function(){
          $('#info-' + $(this).text().match(/(\d+)/)).show();
     },function(){
          $('#info-' + $(this).text().match(/(\d+)/)).hide();
     });
});

JS Fiddle demo .

References:

• eq() .
• hide() .
• hover() .
• index() .
• match() .
• show() .
• text() .

Answer 2

try this :

$(function(){
  $('#pop li').hover(function(){
     $('#info-'+$(this).index()+1).show();
  },function(){
     $('#info-'+$(this).index()+1).hide();
  });
});

Answer 3

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() {

});

Answer 4

Here is sample http://fiddle.jshell.net/7QmR5/

HTML:

<div id="pop">
    <ul>
        <li id="li1">Item 1</li>
        <li id="li2">Item 2</li>
        <li id="li3">Item 3</li>
    </ul>
</div>

<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>

JavaScript:

$(function(){
    $('#pop li').hover(function(){
        $('#info-' + $(this).attr('id').replace('li','')).show();
    },function(){
        $('#info-' + $(this).attr('id').replace('li','')).hide();
    });
});​

Answer 5

I've got an easier solution:

CSS

#info-1{
    display:none;
}
ul > li:hover #info-1 {
    display:block;
}

giving the li elements an id will make it easier to select them using CSS unless you want to use pseudo I believe it's called.

Or the jQuery if needed:

$('li:eq[0]','#pop').hover(function(){
    $('info-1').show();
});