jquery - 将鼠标悬停在 LI 上即可显示 div

Question

我在这里问了类似的问题，尽管我得到了一些答案，但我没能成功。 简而言之，我有一个像这样的 UL 列表:

<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 链接上时才打开。 所以，简而言之。用户来到该页面，第一个链接被打开。他将鼠标悬停在第二个链接上，然后出现第二个链接，第三个、第四个链接也是如此......

<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

尝试这个简单的脚本:

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

为了方便起见，我向所有 div 添加了辅助类 boxlink。您还需要一些 CSS 来默认显示第一个 div:

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

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