私は兄弟姉妹の子供たちがお互いに反応するようにするにはどうすればいいですか?


このCSSは、 meh が集中しているときに aha!を変更できるようにしたいと考えています

li a:focus ~ li a.target {

}

Of course it doesn't work because it is expecting an a:focus ~ li instead of a li a:focus

I have tried with li>a:focus ~ li a.target but it seems to make the same mistake, is there any way to group them so that they would produce the requested response? There doesn't seem to be a way to select a parent and crawl through the hierarchy...

1

2 答え

ul:hover li a{background:red}
ul:hover li a.target{background:transparent}
1
追加された
はい、コンテナ ul は、最下位レベルの子どもだけが受け入れる:focus
追加された 著者 J V,

親を選択してクロールする方法はないようです   階層...

残念ながら、それを行う方法はありません。

私はあなたが欲しいものを正確には分かっていませんが、多分これはそうです:

ul li:first-child:hover + li .target {
    color: red;
}

http://jsfiddle.net/thirtydot/XXZLM/

1
追加された
まあ、より柔軟なものが欲しかったですが、:hover :focus に変更しても正しく動作しません。
追加された 著者 J V,
あ、ごめんなさい!私はそれを変更しましょう!
追加された 著者 J V,
あなたのサンプルは、:hover では動作しますが、:focus では動作しません。
追加された 著者 J V,
いいえ、 li::hover を適用せず、 li:first-child > a は正しいですか?
追加された 著者 J V,
ああ。それでは答えました。
追加された 著者 J V,
あなたがしようとしていることは、あなたの現在のHTML構造ではできません。 li は決してフォーカスされていないので( a は) li:focus では機能しません。親を選択する方法や「上向き」の方法はありませんので、あなたは不運です。ここにjQueryソリューションがあります: jsfiddle.net/thirtydot/XXZLM/1
追加された 著者 thirtydot,
私の例では、 li :hover があり、それがホバリングされるので、セレクタが機能します。 li: li に変更すると、 li です。
追加された 著者 thirtydot,
a 要素が兄弟であるようにHTMLを変更すると、それは動作します: jsfiddle.net/thirtydot/XXZLM/2 。だから: JavaScriptを使う、あなたのHTMLを変更する、またはあきらめる
追加された 著者 thirtydot,
li:first-child は、親要素の最初の子(この場合は ul )を if li "と入力します。つまり、 ul の最初の li を選択します。 「 li 」の最初の a を選択することを意味しません。
追加された 著者 thirtydot,