7

cssで:hover、子イベントがホバーされたときに親要素でトリガーされるイベントを停止して、親自体がホバーされたときにのみトリガーされるようにするにはどうすればよいですか？この場合、私の子要素は実際には絶対位置で親要素の外側に配置されているため、子がホバーされたときに親が変わると少し奇妙になります。

問題を説明するためにJSFiddleを作成しました。

これが私の例で使用されたソリューションのJSFiddleです。

4

3 に答える 3

17

純粋なcssソリューション（実際には2つでも）がありますが、どちらもコストがかかります。

  1. あなたはpointer-events：none;を追加することができます。子要素に-しかし、それ自体のホバースタイルにも応答しません。残念ながら、ポインタイベントはバージョン11より前のIEではサポートされていません（http://caniuse.com/#search=pointer-events）。

  2. 親要素（配置された子を除く）のコンテンツを別の要素（このメソッドのコスト）でラップし、このラッパーにホバースタイルを適用します。

ここで両方の方法の例。

.parent-2,
.parent { position:relative; background:#ddd; width:100px; height:100px; }
.parent:hover { background:blue; }
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; }
/* doesn't work in opera and ie */


.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.content:hover { background:blue; }
于 2012-09-29T20:58:03.867 に答える
5

単純に：あなたの#inner div中に入れ子にしないでください。小さなデモ：小さなリンク。追加したことに注意してください：

html, body {
    position: relative;
}

この場合、これが必要です。

編集：ネストすることを主張する場合は、JavaScriptが少し必要です。サンプルは次のとおりです。

var inn = document.getElementById("inner"), outt = document.getElementById("holder");
outt.onmouseover = function() {
   this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/
}
outt.onmouseout = function() {
   this.style.backgroundColor = "orange";
}
inn.onmouseover = function(ev) {
   ev.stopPropagation();
}

（jQueryを使用して記述した場合、これは短くなりますが、考え方は同じです）。

これがデモです：小さなリンク。

于 2012-09-29T12:14:29.043 に答える
1

イベントがバブリングするのを防ぐには、JavaScriptを少し使用する必要があります。この例を見てください：

css：ホバーはネストのトップdivにのみ影響します

于 2012-09-29T12:24:16.980 に答える