Q&A
コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
cssでの別の要素への適用について
<style> #test:hover { background-color:blue; } #test:hover ~ ＃target{ background-color:red; } </style> <div id="test">テスト1</div> <div>テスト2</div> <div id="target">テスト3</div>
上の様に、「テスト1」にマウスカーソルをのせると、
色が変更する様にしてあります。
これを、
<div> <div id="test">テスト1</div> </div> <div>テスト2</div> <div id="target">テスト3</div>
といった様に、id="test"の要素を、別の要素で囲むと、
正常に動作しませんが、これを正常に動作させるには、
どの様にすれば良いのでしょうか？
回答3件
0
#test:hover ~ ＃target 間接セレクタを使っていますので、そのセレクタでは
#testと同じ階層に#targetを置いてやらないと機能しませんね。
#testを囲んでいるdiv要素にclassかidをつけて、そちらでセレクタを作ってみましょう。
投稿2016/04/27 09:45
総合スコア3763
0
:has() (Selectors Level 4)
Selectors Level 4 規定の :has() で実現可能ですが、実装しているブラウザがありません(2016/05/10現在)。
CSS
1div:has(#test:hover)~＃target
- 4.4. The Relational Pseudo-class: :has() - Selectors Level 4
- 4.4. 関係上の疑似クラス： :has() - Selectors Level 4 （日本語訳）
- :has() CSS relational pseudo-class - Can I use...
- :has - CSS | MDN
代替案
既にあげられているように次の2択しかないと思います。
- CSSセレクタで
#test:hover~＃targetを指定できるように HTML の構造を変える - 構造を変えず、JavaScript で実装する
HTML
1<style> 2#test:hover { 3 background-color: #ddf; 4} 5#parent.child-hover~#target { 6 background-color: #fdd; 7} 8</style> 9<body> 10<div id="parent"> 11 <div id="test">テスト1</div> 12</div> 13<div>テスト2</div> 14<div id="target">テスト3</div> 15<script> 16'use strict'; 17(function () { 18 function handleHover (event) { 19 event.currentTarget.parentNode.classList.toggle('child-hover'); // 簡易コード (#test に子要素が存在するなら、判定条件を厳しくする必要があります) 20 } 21 22 function main () { 23 var element = document.getElementById('test'); 24 25 element.addEventListener('mouseover', handleHover, false); 26 element.addEventListener('mouseout', handleHover, false); 27 } 28 29 main(); 30}()); 31</script>
以前、IE8.js で未対応のCSSプロパティをJavaScriptでCSSをパースして同じ動作をJavaScriptで再現する試みがありましたが、技術的には可能かもしれないですね。
パフォーマンス的な問題はあると思いますが…。
Re: raguel さん
投稿2016/05/10 04:10
総合スコア18164
0
このHTMLだとおそらくできないですね、、、
解決策として
HTMLのコードを#testの次の兄弟要素を#targetにするか
jsを書くしかないかと思います。
jsであれば
JavaScript
1$("#test").hover( 2 function() { 3 //マウスホバー 4 $("#target").addClass("hover"); 5 }, 6 function() { 7 //マウスアウト 8 $("#target").removeClass("hover"); 9 } 10);
CSS
1#target.hover { 2 background-color:red; 3}
でもいいかと思います。
投稿2016/04/28 05:46
総合スコア72
あなたの回答
tips
プレビュー
