保持：對鼠標懸停效果父母，當鼠標結束時

當鼠標懸停在小孩身上時，我想保持父懸停效果處於活動狀態。

我知道我可以使用jQuery？但如果可能的話，我真的想保留在CSS中。

，也不必給所有元素的唯一ID的...

http://forevertan.dk/_temp/eventfest/3/test3.htm

2012-01-11 Christian Bekker

如果你想使用CSS的唯一方式，我強烈建議你，你將不得不稍微改變你的標記。當您沿着子菜單走下去時，當您檢查:hover的a的父母（li）a仍然會在:hover上。基本上我們正在做這樣的：

ul#nav li > a { 
    /* all the normal state styling here */ 
} 
ul#nav li:hover > a { 
    /* hover state styling here */ 
}

我們將擴大a到li的尺寸。所以li似乎表現得像a。唯一的區別是，li是a和子菜單ul的父項。

JSFiddle here。

HTML保持不變：

<ul id="nav"> 
    <li> 
     <a href="#test">Test</a> 
     <ul> 
      <li> 
       <a href="#test/sub">Sub</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#test">Test</a> 
     <ul> 
      <li> 
       <a href="#test/sub">Sub</a> 
      </li> 
     </ul> 
    </li> 
</ul>

CSS變化：

ul#nav > li { 
    padding: 0; 
    margin: 0; 

    float: left; 
    position: relative; 
} 
ul#nav li > a { 
    height: 30px; 
    min-width: 80px; 
    padding: 0; 
    margin: 0; 
    border-right: 1px solid #CCC; 
    border-left: 1px solid #CCC; 

    display: block; 

    background: #000; 

    color: #FFF; 
    text-align: center; 
    line-height: 30px; 
    white-space: nowrap; 
} 
ul#nav li:hover > a { 
    background: #FFF; 

    color: #000; 
} 
ul#nav > li ul { 
    display: none; 
    position: absolute; 
} 
ul#nav > li:hover ul { 
    display: block; 
} 
ul#nav > li ul li { 
    display: block; 
}.

來源

2012-01-11 19:48:02 buschtoens

只是試着用你做的.. 無法真正讓它工作？它行爲很奇怪？你能做一個快速工作的例子嗎？ – 2012-01-11 20:25:46

添加了JSFiddel。 http://jsfiddle.net/ns2Kd/ – buschtoens 2012-01-11 21:29:42

啊我看到了:)謝謝！ – 2012-01-11 21:39:12

把：懸停選擇的li元素上，而不是錨

#navMain li:hover > a{ 
    background-color: black; 
}

http://jsfiddle.net/293mV/

來源

2012-01-11 19:29:47

這並不完全符合他的描述。當父母被徘徊時，這會改變孩子。 – 2012-01-11 19:34:01

我只是補充說這是真的，但IE6的'li：hover'將不起作用。使用IE6時，僞選擇器'：hover'僅在'a'元素上有效 – 2012-01-11 19:34:33

@Diodeus：即使鼠標懸停在子節點上，請求也會保留父節點_effect_。通過觸發li而不是a，當鼠標懸停在頂層鏈接_and_上方時，頂層a以鼠標懸停狀態顯示。這正是被問到的。 – 2012-01-11 19:39:21

您不能使用CSS來實現父項目;你需要使用JavaScript。如果你不喜歡ID，你可以使用jQuery的相對選擇器.parent(),.next()等。

來源

2012-01-11 19:30:24

你能舉個例子嗎？ – 2012-01-11 21:00:55

保持：對鼠標懸停效果父母，當鼠標結束時

回答

相關問題