CSSはdivにホバーしますが、子供にホバーする場合はホバーしません
この質問にすでに回答しているかどうかを確認しましたが、何も見つかりませんでした。探しているリバースcssルールに関する質問のみです。
1つ以上の子を含むdivがあり、ホバー時に背景を変更したいが、その子の1つにホバーした場合は変更しないでください。 :hoverルールを、含まれている子孫ではなく、純粋な要素に制限する必要があります。 CSSのペアレントルールではなく、マウスが親とその子の上を通過するたびに:hoverトリガーされるので、自分自身がアイデアから抜け出し、CSSだけではこの結果を達成できない可能性があります。ただし、問題はCSSに関するものであるため、JSまたはJQueryソリューションは必要ありません(自分で提供できます)。
コード:
HTML
<div class="parent">Text of the parent
<p class="class1">I do not need to trigger parent's background color change!</p>
</div>
CSS
.parent {
background: #ffffff;
}
.parent:hover {
background: #aaaaff;
}
.class1 {
margin: 10px;
}
子がホバーされたときに要素のホバー効果を停止する機能は、現在のところ、CSSセレクターでは不可能です これは、可能な限り近づいています JavaScriptなし-ホバー時に子に影響を与える親に影響を与えます。これは、子が親の幅と高さの100%である場合にのみ機能します
CSS4ドラフト には親セレクターがあります!
これは、次のような場合に使用できます。
.parent! .class1:hover {
background: #ffffff;
}
しかし、その機能はまだありません
このプロパティを子クラスCSSに追加するだけでこれを実現できます。
pointer-events: none;
これでうまくいきました。
<style>
.parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }
.child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
.child:hover { background-color: blue; }
.parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
.child:hover ~ .parent-overwrite { display: block; }
</style>
<div class="parent">
<div class="child">Child</div>
<div class="parent-overwrite"></div>
</div>
これにはJavaScriptを使用する必要があります。ザック・ソーシエがすでに言ったように、純粋なCSSでは現在本当に不可能です。
純粋なCSSでそれを行うことはできませんが、jQueryで簡単に実現できます。したがって、子供の上にカーソルを置いたときに、親を修正する必要はありません。
https://jsfiddle.net/8nqfLgsk/2/
$(".list-categories li a").hover( function(){
$(this).toggleClass("active-btn");
});
基本的に、これで、親を修正せずに、ホバーしている要素にクラスを追加するだけです。