web-dev-qa-db-ja.com

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;
    }
csshoverchildren
18
Nillus

子がホバーされたときに要素のホバー効果を停止する機能は、現在のところ、CSSセレクターでは不可能です これは、可能な限り近づいています JavaScriptなし-ホバー時に子に影響を与える親に影響を与えます。これは、子が親の幅と高さの100％である場合にのみ機能します

CSS4ドラフト には親セレクターがあります!これは、次のような場合に使用できます。

.parent! .class1:hover {
   background: #ffffff;
}

しかし、その機能はまだありません

11
Zach Saucier

このプロパティを子クラスCSSに追加するだけでこれを実現できます。

pointer-events: none;

これでうまくいきました。

23
sam thomas

フィドルこの回答に基づいて ：

<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では現在本当に不可能です。

2
creeation

純粋なCSSでそれを行うことはできませんが、jQueryで簡単に実現できます。したがって、子供の上にカーソルを置いたときに、親を修正する必要はありません。

https://jsfiddle.net/8nqfLgsk/2/

$(".list-categories li a").hover( function(){

   $(this).toggleClass("active-btn");

});

基本的に、これで、親を修正せずに、ホバーしている要素にクラスを追加するだけです。

0
Mike