下記のようなhtmlがあったときに「ここだけ色を変えたい」部分だけ、
color,background-colorを変えたいと思っています。
jQueryでできそうですが、cssだけでもできないかと考えています。
:hoverと:not使いながらあれこれ試しているのですが、階層の深さが変わると目的通りにいかない状態です。
lang
1<div class="alpha"> 2 <div class="beta"> 3 <span>ここは変えたくない</span> 4 </div> 5 <div class="alpha"> 6 <span>ここは変えたくない</span> 7 <div class="beta"> 8 <span>色を変えたい</span> 9 </div> 10 <div class="alpha"> 11 <div class="beta"> 12 <span>ここは変えたくない</span> 13 </div> 14 </div> 15 </div> 16</div>
lang
1.alpha:hover .beta:hover{ 2 background-color:red 3} 4.alpha:hover :not(.alpha) .beta:hover{ 5 background-color:red 6}
このような同じセレクターが階層化した場合に、最も深い(マウスホーバー直近)のエレメントのみを対象にする方法はあるでしょうか?
【追記】
spanの部分は実際にはspan以外にもpやdivが存在する場合もあります。
最小限の短いコードにしていあるため申し訳ありません。
よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/07/13 07:05