與jQuery

Question

我想創建以下一個導航欄創建導航欄是我的代碼： HTML： 這是導航巴爾

每個 '.icons'類的懸停

<div class="cat-set"> 
    <div class="icon-wrap"> 
    <div class="icons active" id="mobiles"><div class="bgimg mobiles"></div></div> 
    <div class="icons" id="laptops"><div class="bgimg laptops"></div></div> 
    </div> 
</div> 

一個部門將被顯示，所以有兩個箱子來顯示和隱藏，這是該代碼：

<div class="cat-demo" id="mobiles"> 
    <p>This is for mobiles, if mouse is on .mobiles then this will be shown</p> 
</div> 
<div class="cat-demo" id="tablets"> 
    <p>This is for tablets, if mouse is on .mobiles then this will be shown</p> 
</div> 

這是該jQuery代碼：

$('.icons').hover(function(){ 
    $('.icons').each(function(){$(this).removeClass("active");}); 
    $(this).addClass("active"); 
    var position = $(this).position(); 
    $('.cat-demo').css({'left':(position.left-4)+'px'}); 
    var showThis=$(this).attr("id") 
    $(".cat-demo:visible").hide() 
    $("'#"+showThis+".cat-demo'").show(); 
}); 

所以到這裏一切正常，但問題是我想隱藏'.cat-demo' 如果鼠標指針搞出來的'.icons'的，如果指針是.cat-demo那麼它不應該隱瞞這一點。請幫助我...如果你想改變html佈局，請繼續。

這是小提琴鏈接，這http://jsfiddle.net/ndevJ/

Answer 1

就那麼必須使用JS這種類型的菜單？ 如果您的菜單具有簡單的行爲，那麼只使用CSS顯示/隱藏菜單的子項目。

例如：

<ul class="cat-set"> 
    <li> 
     mobile 
     <p> 
      This is for mobiles, if mouse is on .mobiles then this will be shown 
     </p> 
    </li> 
    <li> 
     laptops 
     <p> 
      his is for tablets, if mouse is on .mobiles then this will be shown 
     </p> 
    </li> 
</ul> 

和CSS：

ul.cat-set > li {display: inline-block; margin: 10px;} 
ul.cat-set > li p {display: none; position: absolute;} 
ul.cat-set > li:hover p {display: block;}