javascript - HTML + CSSの別の要素セレクターで要素の属性値を変更する方法は?

Question

2 つの要素のボタンがあり、別のボタンをクリックすると 1 つの色を変更したい、またはその逆の場合。試してみましたが、うまくいきません。誰でも私を助けることができますか？HTML:

<button id="t1">Test 1</button>
<button id="t2">Test 2</button>

CSS:

#t1:active + #t2
{
    color: red;
}
#t2:active + #t1
{
    color: red;
}

score 2 · Accepted Answer

CSS のみを使用してこれを実現する方法はいくつか考えられますが、完全に「誠実」というわけではありません。

:active最初の方法は、最初のボタンの「偽の」クローンを作成し、2 番目のボタンがdemo: little linkのときにそれを表示することに依存しています。

button2 番目の方法は、の1 つがである場合:active、その背後にある親要素:activeも同様であるという事実に依存しています。このソリューションのデモは次のとおりです: little link。

score 2 · Accepted Answer

兄弟コンビネータは一方向 (前の兄弟から後の兄弟) でのみ機能するため、その逆はありません。#t2つまり、CSS を使用すると、がクリックされたときだけ変更でき#t1、がクリックされた#t1ときは変更できません#t2。また、兄弟コンビネータではなく、>子コンビネータです。

両方の方法で同じ動作が必要な場合は、:activeセレクターの代わりに JavaScript の mousedown イベントを使用する必要があります。

2 に答える 2