Hover LI to show div

问题:

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>

回答1:

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/

回答2:

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

回答3:

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();
});

回答4:

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/

回答5:

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

回答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');
});