CSS懸停菜單：讓懸停的菜單項，以保持懸停狀態的css

enter image description here CSS懸停菜單：讓懸停的菜單項，以保持懸停狀態的css

enter image description here

在這種情況下，我怎麼會得到設定，以保持懸停狀態，而要扔的菜單項？有沒有CSS的唯一方法，或者我將不得不引入一些JavaScript？謝謝。

來源

2011-09-07 Drew H

你的意思是你想強調一個留下來，如果你完全移動鼠標關閉菜單高亮？ –

是的。那是對的。我認爲這是不可能的CSS。但不知道。 –

@DrewH - 它可以用普通的CSS。看到我的答案。 – Neal

它是可能只是CSS。

例如：如果你的菜單由嵌套列表：

li:hover { 
    background: #color; 
} 

li:hover ul { 
    display: block; 
} 

li:hover ul li {}

小提琴：從上面的例子http://jsfiddle.net/maniator/ZC4xv/

CSS：

#nav-menu > li { 
    background: orange; 
    float: left; 
    padding: 10px; 
    border: 1px solid grey; 
} 

#nav-menu > li:hover a { 
    background: red; 
    padding: 2px; 
    display: inline; 
} 

#nav-menu > li ul { 
    display: none; 
    position: absolute; 
} 

#nav-menu > li:hover ul { 
    display: block; 
    margin-left: 5px; 
} 

#nav-menu > li:hover ul li { 
    background: blue; 
} 

#nav-menu > li:hover ul li:hover { 
    background: green; 
}

來源

2011-09-07 21:38:44 Neal

感謝這工作。 –

@DrewH - 沒問題^ _ ^ – Neal

假設子菜單一個嵌套的列表，你可以使用jQuery來添加一個懸停類到父菜單項：

<ul class="primary-nav"> 
    <li>Menu Item 1 
     <ul class="sub-nav"> 
      <li>Sub-Menu Item 1</li> 
      <li>Sub-Menu Item 2</li> 
     </ul> 
    </li> 
    <li>Menu Item 2</li> 
</ul> 

<script> 
    $('.primary-nav li').hover(function(){ 
     $(this).addClass('hover'); 
    }, function(){ 
     $(this).removeClass('hover'); 
    }); 
</script>

來源

2011-09-07 21:47:06 JeffreyPia

嘗試使用span標記中的頂層項目。假設：

<li> 
    <a><span>Setting</span></a> 
    <ul> 
    ... 
    </ul> 
</li>

那麼這就是CSS：

li:hover span { 
    background: #color; 
    display: block; 
} 

li:hover ul { 
    display: block; 
}

來源

2011-09-07 21:48:43 lnguyen55

CSS懸停菜單：讓懸停的菜單項，以保持懸停狀態的css

回答

相關問題