Question

我正在努力解决这个问题，我可以整天隐藏/显示/ fadin / fadout但是我试图让我的脑袋围绕着我的目标中的一个元素并在鼠标悬停上拉出它的具体描述，我有接近得到这个，但感觉我错过了什么，下面是我的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，我的想法是将描述放在相应的

元素上方btw：

.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

如果两组元素之间存在一对一的关系，并且每组匹配中的顺序，通常更容易使用索引而不是解析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);
}

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

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

2 个答案: