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/

Answer 2

您无法使用hover来影响不是悬停元素的后代或兄弟元素的元素。

但你可以将你的html改为

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

并使用

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

Demo

如果您希望说明显示在所有定义的下方，您可以使用position: absolute将它们放在底部：Demo

Answer 3

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

Answer 4

这样的事情应该完成工作。通常我会回复看你先尝试过的东西，但这很容易。

$(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 5

将所有div包装成包装div并初始应用css以使第一个div可见

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

然后使用index（）属性检查哪个li已悬停，然后使用jquery显示相应的div

$('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 6

见工作Fiddle Here

首先将css display none应用于最后3个div：

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

然后写下这个js代码：

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

悬停LI显示div

6 个答案: