Hover LI to show div

Question

I asked similiar question on here, and eventough i got some answers, i didnt managed to make it work. In short, i have a UL list like this:

<ul class="productlist">
      <li><a href="#" id="link0" class="product-link">Caviar</a></li>
      <li><a href="#" id="link1" class="product-link">Athena</a></li>
      <li><a href="#" id="link2" class="product-link">Knot</a></li>
      <li><a href="#" id="link3" class="product-link">Brooke Leaf</a></li>
</ul>

Bellow that, i have 4 DIV's. All of them except the first one should be hidden, and only opened when the user hovers over their LI link above. So, in short.User comes to the page, first link is opened.He hovers over second, and second one appears, same thing with third, fourth...

<div id="boxlink0">Some text for the first link</div>
<div id="boxlink1">Some text for the second link</div>
<div id="boxlink2">Some text for the third link</div>
<div id="boxlink3">Some text for the fourth link</div>

Answer 1

Something like this should get the job done. Usually I reply to see what you have attempted first, but this was easy enough.

$(document).ready(function(){
    $(".productList li").hover(function(){
        $("#box"+$(this).attr("id")).show();
    },function(){
        $("#box"+$(this).attr("id")).hide();
    });
    $("#boxlink0").show();
    $("#boxlink1, #boxlink2, #boxlink3").hide();
});

Answer 2

Wrap all divs into a wrapper div and initally apply css for making only first div visible

<div id="wrapper">
  <div id="boxlink0">Some text for the first link</div>
  <div id="boxlink1">Some text for the second link</div>
  <div id="boxlink2">Some text for the third link</div>
  <div id="boxlink3">Some text for the fourth link</div>
<div>

CSS

#wrapper div
{
    display:none;
}
#wrapper div:first-child
{
    display:block;
}

Then check which li has been hovered on using index() property and then show the corresponding div using jquery

$('ul li a').hover(function(e){
    var liNumber=$(this).parent('li').index();
    $('#wrapper div').css('display','none');
    $('#wrapper div:nth-child('+(liNumber+1)+')').show();
})

JSFiddle: http://jsfiddle.net/huF8Z/

Answer 3

You can't use hover to affect elements which aren't descendants or siblings of the hovered element.

But you could change your html to

<dl class="productlist">
    <dt><a href="#" id="link0" class="product-link">Caviar</a></dt>
    <dd id="boxlink0">Some text for the first link</dd>
    <dt><a href="#" id="link1" class="product-link">Athena</a></dt>
    <dd id="boxlink1">Some text for the second link</dd>
    <dt><a href="#" id="link2" class="product-link">Knot</a></dt>
    <dd id="boxlink2">Some text for the third link</dd>
    <dt><a href="#" id="link3" class="product-link">Brooke Leaf</a></dt>
    <dd id="boxlink3">Some text for the fourth link</dd>
</dl>

and use

.productlist dd {
    display: none;
}
.productlist > dt:hover + dd {
    display: block;
}

Demo

And if you want descriptions to appear below all definitions, you could use position: absolute to place them at the bottom: Demo

Answer 4

Try this simple script:

var $boxes = $('.boxlink');
$('.productlist .product-link').mouseover(function() {
    $boxes.hide().filter('#box' + this.id).show();
});

I added helper class boxlink to all divs for convenience. You also need a little CSS to show the first div by default:

.boxlink {
    display: none;
}
#boxlink0 {
    display: block;
}

Demo: http://jsfiddle.net/Vg4SH/

Answer 5

$(".productlist li a").hover(function(e){
    e.stopPropogation(); // to stop bubbling
    $("#box" +$(this).attr(id)).show();
})

Answer 6

See working Fiddle Here

First apply css display none to last 3 divs:

#boxlink1, #boxlink2, #boxlink3 {
    display:none
}

then write this js code:

$('#link0').hover(function(){
    $('#boxlink0').css('display','block');
    $('#boxlink1, #boxlink2, #boxlink3').css('display','none');
});

$('#link1').hover(function(){
    $('#boxlink1').css('display','block');
    $('#boxlink0, #boxlink2, #boxlink3').css('display','none');
});

$('#link2').hover(function(){
    $('#boxlink2').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink3').css('display','none');
});

$('#link3').hover(function(){
    $('#boxlink3').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink2').css('display','none');
});