悬停李显示div

我在这里问类似的问题，并且，尽管我有一些答案，我没有设法使其工作。总之，我有一个UL列表如下：悬停李显示div

<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链接上时才会打开。所以，在short.User来的页面，第一个链接是opened.He悬停在第二和第二个出现，与第三，第四同样的事情...

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

来源

2014-03-06 Mariola

如果这是一个导航菜单，通常div会进入li中并且绝对定位。如果你这样做，这可以通过CSS而不是诉诸jquery – Huangism

试试这个简单的脚本：

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

我添加辅助类boxlink为了方便所有div。你还需要一点CSS默认显示的第一个div：

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

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

来源

2014-03-06 18:28:01 dfsq

嘿！老实说，谢谢你的帮助一堆。只是试着按照你的指示，但由于某种原因它不会工作... 如果我给你一个链接，让你可以看一看吗？ http://tinyurl.com/onhovershow只显示第一个div，但尽管我将JS包含在标题中，但它并没有显示其他人在悬停... – Mariola

您可以给我发送链接，当然。 – dfsq

谢谢，再次，对不起，无聊:) – Mariola

不能使用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

来源

2014-03-06 18:25:37 Oriol

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

来源

2014-03-06 18:25:49 Rex

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

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

来源

2014-03-06 18:25:52

总结所有div成包装股利和initally制作只有第一个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

CSS

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

然后检查其里已经徘徊在USI NG指数（）属性，然后使用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/

来源

2014-03-06 18:35:34

见工作Fiddle Here

首先用CSS显示无持续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'); 
});

来源

2014-03-06 19:05:32 Gunjan

悬停李显示div

回答

相关问题