CSSリストアイテムをホバリングすると、親アイテムを変更するCSS

Question

単純なULリストを持っています。下のHTMLのMoreリストアイテムにカーソルを置くと、その子メニューが表示され、表示されます。

私がする必要があるのは、実際にMoreのCSSのCSSを変更し、子メニューが表示されホバリングされた後です。

Moreの上にカーソルを置くと、子メニューが表示されるようになり、その子メニューの上にマウスカーソルを合わせます。この時点で、Moreを持つメニューであるこの子メニューのParentのCSSをテキストとして変更する必要があります。

Javascriptなしでこれを行う方法を知っているなら、私は知りたいのですが... JSなしでも可能性はないのでしょうか？

<div id="nav-wrapper"> 
     <ul> 

      <li><a href="">Link</a></li> 

      <li><a href="">Link 5</a></li> 

      <li><a href="">More</a> 
       <ul> 
        <li><a href="">Sub Link 1</a></li> 
        <li><a href="">Sub Link 2</a></li> 
        <li><a href="">Sub Link 3</a></li> 
        <li><a href="">Sub Link 4</a></li> 
        <li><a href="">Sub Link 5</a></li> 
       </ul> 
      </li> 

     </ul> 
    </div> 

あなたはCSSで親要素を選択することはできません

<style type="text/css" media="screen"> 
#nav-wrapper ul { 
    position:relative; 
    width: 700px; 
    float: right; 
    margin: 0; 
    list-style-type: none; 
} 
#nav-wrapper ul li { 
    vertical-align: middle; 
    display: inline; 
    margin: 0; 
    color: black; 
    list-style-type: none; 
} 
#nav-wrapper ul li a { 
    text-decoration: none; 
    white-space: nowrap; 
    line-height: 45px; 
    font-size: 13px; 
    color: #666; 
    padding: 5px 15px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav-wrapper ul li a:hover { 
    color: #fff; 
    background-color: #4caef2; 
} 
#nav-wrapper ul li a:visited { 
    color: #666; 
} 

/* Hide Sub-menus */ 
#nav-wrapper ul ul{ 
    display: none; 
} 
/* SHOW Sub-menus on HOVER */ 
#nav-wrapper ul li:hover ul{ 
    display: block; 
    margin:-10px 0 0 0; 
    padding:0px 20px 20px 20px; 
    border-color:#fff; 
    border:1px; 
    border-style:solid; 
    background:#FFF; 
    position:absolute; 

    top:45px; 
    right: 320px; 
    width: 420px; 
} 

</style> 

Answer 1

これらの他の回答にもかかわらず、ここではadjacent selectorを使用してそれについて行くのはややこしい方法です。

HTML：

<ul> 
    <li> 
     <ul> 
      <li>Sub Link 1</li> 
      <li>Sub Link 2</li> 
      <li>Sub Link 3</li> 
     </ul> 
     <a href="#">Menu</a> 
    </li> 
</ul> 

CSS：

* { 
    margin: 0; 
    padding: 0; } 
ul { list-style: none; } 
ul > li { position: relative; } 
ul li a { 
    height: 16px; 
    display: block; } 
ul ul { 
    position: absolute; 
    top: 16px; 
    left: 0; 
    cursor: pointer; 
    display: none; } 
ul li:hover ul { display: block; } 
ul ul:hover + a { color: red; } 

プレビュー：http://jsfiddle.net/Wexcode/YZtgL/

Answer 2

CSS。あなたが望むことを達成するには、javascript/jQueryが必要です。

CSS3 selectors...

Answer 3

CSSを使用した要素の親を選択することはできません。これを実装するには、JavaScriptやjQueryなどのJavaScriptライブラリを使用する必要があります。

これは役に立ちます。 Complex CSS selector for parent of active child

Answer 4

旧質問、および受け入れ答えは賢いです。 （そのブラウザのみアンカーのスタイルを置く理解IE6で動作しません

#nav-wrapper ul li:hover>a 

この：

#nav-wrapper ul li a:hover 

へ：しかし、これはからあなたのCSSで1つだけの変更で、達成することは非常に簡単です）。しかし、隣接する兄弟コンビネータセレクタ（+）も同様です。

は、アクション

Answer 5

で修正作品上記@CherryFlavourPezの解決のためにthis jsFiddleを参照してください。なぜそれが動作する理由は明確に説明されていません。 リチウム要素（「詳細」のテキストを有するもの）は、サブメニューの親（要素その中5個のLiとUL）であることに留意されたいです。 要素はサブメニューの（隣接する）の兄弟です。したがって、あなたがサブメニュー上にホバリングしているときは、実際にはまだ親の上にまだホバーしていますli要素です。