悬停LI以显示div [英] Hover LI to show div

问题描述

我在这里问类似的问题，并且eventough我得到一些答案，我没有设法使它的工作。
简而言之，我有一个这样的UL列表：

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>

贝拉，我有4个DIV。
除第一个之外的所有这些都应该被隐藏，并且只有当用户将鼠标悬停在其上面的LI链接时才会打开。
所以，简而言之，用户来到页面，第一个链接被打开。他悬停在第二个，第二个出现，与第三个，第四个...

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>

推荐答案

尝试这个简单的脚本：

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

我添加了helper类 boxlink 为了方便。您还需要一些CSS来默认显示第一个div：

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

演示： http://jsfiddle.net/Vg4SH/

这篇关于悬停LI以显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！