[解決済み] 子要素にカーソルを合わせたときに、親要素のスタイルを変更するには？

質問

が存在しないことは知っています。 CSS親セレクタ しかし、そのようなセレクタを使用せずに、子要素にカーソルを合わせたときに親要素のスタイルを変更することは可能でしょうか？

例を挙げると 削除ボタン にカーソルを合わせると、削除されようとしている要素がハイライトされます。

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

純粋なCSSによって、マウスがボタンの上にあるとき、このセクションの背景色を変更するにはどうすればよいでしょうか。

どのように解決するのですか？

古い質問ですが、先ほど擬似子機（ただし擬似ラッパー）なしでできました。

がない状態で親を設定すると pointer-events で、その後に子 div と pointer-events に設定します。 auto であれば、動作します:)

なお <img> タグ（例）ではうまくいきません。

を設定することも忘れないでください。 pointer-events から auto を、独自のイベントリスナーを持つ他の子プロセスのために使用することができます。

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

編集する

として シャドウウィザード 謹告：IE10以下では動作しないことを明記しておきます。(FFやChromeの古いバージョンも同様です。 こちら )