切换div的悬停 [英] Toggle div's on hover

问题描述

我有一个测试UL清单，如下所示:

I have a test UL list that goes like this:

<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
....
</ul>

而且，下面是我与div相关的部分，又名:

And, bellow that i have related div's, aka:

<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>

我想知道如何才能使每个div仅在其LI项悬停时才显示，也许有些淡入效果. 我从这里尝试了其他答案，但没有运气:\

I was wondering how could i make each div only shows when its LI item is hovered, maybe with some fadein effect. I tried with some other answers from here, but no luck :\

推荐答案

正如我所提到的，重要的是您的id是唯一的.因此，您需要找到另一种引用您的<div>的方法.我可以建议使用data-*属性:

As I've mentioned, it is important that your ids are unique. So you need to find another way to reference your <div>s. May I suggest using data-* attributes:

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可能类似于以下内容:

Then your jQuery could look something like the following:

$('ul li').on({
    'mouseenter':function(){
        $('#'+$(this).data('id')).fadeIn();
    },'mouseleave':function(){
        $('#'+$(this).data('id')).fadeOut();
    }
});

JSFiddle

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