我有一个测试 UL 列表，如下所示：
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
....
</ul>
并且，下面我有相关的 div，又名：
<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>
我想知道如何让每个 div 仅在其 LI 项目悬停时显示，也许具有一些淡入淡出效果。
我尝试了这里的其他一些答案，但没有运气：\
正如我所提到的，重要的是你的id是独一无二的。所以你需要找到另一种方式来引用你的<div>s。我可以建议使用data-*属性：
HTML
<ul>
<li data-id="firstdiv">First div</li>
<li data-id="seconddiv">Second div</li>
<li data-id="thirddiv">Third div</li>
</ul>
那么你的 jQuery 可能看起来像下面这样：
$('ul li').on({
'mouseenter':function(){
$('#'+$(this).data('id')).fadeIn();
},'mouseleave':function(){
$('#'+$(this).data('id')).fadeOut();
}
});
JSFiddle
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
