javascript - Jquery在鼠标悬停时隐藏显示特定的div元素

Question

我对此有点挣扎，我可以整天隐藏/显示/淡入淡出/淡出，但我试图让我的头脑围绕在我的元素中定位一个元素并在鼠标悬停时拉出它的具体描述的逻辑，我已经接近得到这个但感觉我错过了一些东西，下面是我的 HTML：

<ul id="menu" class="menu">
                        <li><a href="">Home</a></li>
                        <li id="menu1" class="menu-link"><a href="/">LINK1</a></li>
                        <li id="menu2" class="menu-link"><a href="/">LINK2</a></li>
                        <li id="menu3" class="menu-link"><a href="/">LINK3</a></li>
                        <li id="menu4" class="menu-link"><a href="/">LINK4</a></li>
                    </ul>
                    <div id="menu1content" class="menuDescription">
                        Description for "menu1"
                    </div>
                    <div id="menu2content" class="menuDescription">
                        Description for "menu2"
                    </div>
                    <div id="menu3content" class="menuDescription">
                        Description for "menu3"
                    </div>
                    <div id="menu4content" class="menuDescription">
                        Description for "menu4"
                    </div>

这是我的CSS，想法是将描述定位在其对应的上方

元素顺便说一句：

.menu{
    font-family: 'LeagueGothicRegular';
    position: absolute;
    top:25px;
    overflow:hidden;
    right:100px;
    float:right;

}
.menu ul{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
.menu li{
    display:inline;
    clear:both;
    position:relative;
    overflow:hidden;
}
.menu li a{
    float:left;
    width:6em;
}

.menuDescription  {
    font-size: 11px;
    color: rgb(0, 0, 0);
    position: absolute;
    right: 407px;
    margin-left: 5px;
    top: 15px;
}

最后是jquery：

$(document).ready(function() {
    $('div.menuDescription').hide();
    $('li.menu-link').bind('mouseover', function() {
        $('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
    })

            .mouseout(function() {
                $('#' + $(this).attr('id') + 'content').fadeOut();
            });

});

Answer 1

当您在 2 组元素及其在每组匹配中的顺序之间存在一对一关系时，通常更容易使用索引而不是解析 ID

var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
   /* "this" is element being hovered*/
   var index= $links.index(this);
   $content.stop().hide().eq(index).fadeIn(); 
},function(){
   /* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})

DEMO

Answer 2

我已经更新并简化了您的小提琴以使其正常工作：Working Fiddle。这是没有任何JS的简化代码：

HTML：

<ul id="menu" class="menu">
  <li>
      <a href="">Home</a>
  </li>
  <li id="menu1" class="menu-link">
      <a href="/">LINK1</a>
      <div id="menu1content" class="menuDescription">
        Description for "menu1"
      </div>
  </li>
  <li id="menu2" class="menu-link">
      <a href="/">LINK2</a>
      <div id="menu2content" class="menuDescription">
         Description for "menu2"
      </div>
  </li>
  <li id="menu3" class="menu-link">
      <a href="/">LINK3</a>
      <div id="menu3content" class="menuDescription">
         Description for "menu3"
      </div>
    </li>
  <li id="menu4" class="menu-link">
      <a href="/">LINK4</a>
      <div id="menu4content" class="menuDescription">
         Description for "menu4"
      </div>
    </li>
</ul>

CSS：

.menu{
    font-family: 'LeagueGothicRegular';
    position: absolute;
    top:25px;
    overflow:hidden;
    right:100px;
    float:right;

}
.menu ul{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
.menu li{
    float:left;
    margin: 0 5px;
    position:relative;
    overflow:hidden;
    width: 120px;
    height: 30px;
}
.menu li a{
    position: absolute;
    bottom: 0;
}

.menu li .menuDescription {
    display: none;
}

.menu li:hover .menuDescription {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
}

.menuDescription  {
    font-size: 11px;
    color: rgb(0, 0, 0);
}

如果您需要任何解释，请告诉我，我会编辑我的答案。