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

我已經更新並簡化了您的小提琴以使其正常工作： 工作小提琴 。 這是沒有任何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);
}

讓我知道您是否需要任何解釋，我將編輯我的答案。