CSS親セレクターが存在しないことは知っていますが、そのようなセレクターなしで子要素をホバーするときに親要素をスタイル設定することは可能ですか？
例を挙げましょう：ホバーすると削除される要素を強調表示する削除ボタンを考えます：
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
純粋なCSSを使用して、マウスをボタンの上に置いたときにこのセクションの背景色を変更するにはどうすればよいですか？
回答:
さて、この質問は以前に何度も尋ねられており、短い典型的な答えは、次のとおりです。純粋なCSSでは実行できません。その名のとおりです。カスケードスタイルシートは、カスケード方向のスタイル設定のみをサポートし、アップ方向はサポートしません。
ただし、この例のようにこの効果が望まれるほとんどの状況では、これらのカスケード特性を使用して目的の効果に到達する可能性があります。この疑似マークアップを考えてみましょう：
<parent>
<sibling></sibling>
<child></child>
</parent>
トリックは、兄弟に親と同じサイズと位置を与え、親の代わりに兄弟をスタイルすることです。これは親がスタイルされているように見えます！
では、兄弟をどのようにスタイルするのですか？
子がホバリングされると、親もホバリングされますが、兄弟はホバリングされません。同じことが兄弟にも言えます。これは、兄弟をスタイルするための3つの可能なCSSセレクターパスで終わります。
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
これらの異なるパスはいくつかの素晴らしい可能性を可能にします。たとえば、質問の例でこのトリックを解き放つと、次のフィドルになります。
div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}
明らかに、ほとんどの場合、このトリックは兄弟を親と同じサイズにする絶対配置の使用に依存します。なお、子を親の中に表示させます。
特定の要素を選択するために、より限定されたセレクターパスを使用する必要がある場合があります。これは、ツリーメニューにトリックを複数回実装するこのフィドルに示すようにです。本当にいいです。
私はそれが古い質問であることを知っていますが、私は疑似子（疑似ラッパー）なしでなんとかそうすることができました。
あなたは何にもないし、親を設定した場合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の古いバージョンもここにあります）
もう、単純なアプローチ（旧質問への）..
兄弟や使用などの場所要素に次のようになります。
<div id="parent">
<!-- control should come before the target... think "cascading" ! -->
<button id="control">Hover Me!</button>
<div id="target">I'm hovered too!</div>
</div>
#parent {
position: relative;
height: 100px;
}
/* Move button control to bottom. */
#control {
position: absolute;
bottom: 0;
}
#control:hover ~ #target {
background: red;
}
選択した子の親を選択するためのCSSセレクターはありません。
あなたはJavaScriptでそれを行うことができます
前述のように、「選択された子の親を選択するためのCSSセレクターはありません」。
だからあなたはどちらか：
JavaScript側では：
$('#my-id-selector-00').on('mouseover', function(){
$(this).parent().addClass('is-hover');
}).on('mouseout', function(){
$(this).parent().removeClass('is-hover');
})そして、CSS側では、次のようになります。
.is-hover {
background-color: red;
}この解決策はデザインに完全に依存しますが、子をホバーするときに背景を変更したい親divがある場合は、::after/を使用して親を模倣することができます::before。
<div class="item">
design <span class="icon-cross">x</span>
</div>CSS：
.item {
background: blue;
border-radius: 10px;
position: relative;
z-index: 1;
}
.item span.icon-cross:hover::after {
background: DodgerBlue;
border-radius: 10px;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
}純粋なcssソリューションを必要としない人のためのシンプルなjqueryソリューション：
$(".letter").hover(function() {
$(this).closest("#word").toggleClass("hovered")
});.hovered {
background-color: lightblue;
}
.letter {
margin: 20px;
background: lightgray;
}
.letter:hover {
background: grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
<div class="letter">T</div>
<div class="letter">E</div>
<div class="letter">S</div>
<div class="letter">T</div>
</div>これはSassで非常に簡単に実行できます。このためにJavaScriptを深く掘り下げないでください。sassの＆セレクターはまさにこれを行います。
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand