1

HTML:

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

リンク 3.1 または 3.2 にカーソルを合わせると、リンク 3 (親リンク) のテキストの色が変更されるように、CSS でこれを変更するにはどうすればよいでしょうか。

これを十分にシンプルにして、可能な限り最善の方法で質問したことを願っています。それぞれのテキストの色を個別に変更する方法は知っていますが、親の li タグのテキストの色を変更する方法がわかりません。

4

4 に答える 4

2

残念ながら、現在のところ、CSS を使用して要素の親を選択することはできません。これは、最終的に行う必要があることです。そのためには、javascript に頼る必要があります。

この非常によく似た (範囲内の) 質問と、jQuery で達成される簡単な解決策については、CSS 親セレクターはありますか?を参照してください。

于 2013-07-20T04:36:32.663 に答える
2

私があなたの質問を正しく理解していれば、親のliをターゲットにしてから、子の色をオーバーライドできます。

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

li:hover{
    color:blue;

}

li > ul > li{
    color: black;
}

ここにjsfiddleがあります： http://jsfiddle.net/eedWZ/1/

親で異なる色をトリガーするために異なるサブリが必要な場合、それは私が知る限りcssでは不可能ですが、javascriptで簡単に行うことができます。それがあなたの意図であるかどうか教えてください。そのためのjavscriptを手伝うことができます.

于 2013-07-20T04:39:48.840 に答える
0 
li:hover
{
color:blue;
cursor:pointer;
}
li:hover li
{
color:Red;
}
li ul li:hover
{
color:Red;
cursor:pointer;
}
于 2013-07-20T06:38:53.413 に答える
0

コードで少し遊んだ後、探していたソリューションを最終的に見つけることができました。以下のソリューションをコードに貼り付け、JS fiddle へのリンクを貼り付けます。

HTML

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

CSS:

li:hover { color: red; }
li:hover li { color: black; }
li li:hover { color: red; }

JS フィドル: http://jsfiddle.net/Nz5Gq/1/

于 2013-07-20T05:04:12.590 に答える