-2

div :hover子イベントが親イベントによってオーバーライドされないようにするにはどうすればよい:hoverですか?

これは私がdiv要素を作成する方法です:

HTML

<script type="text/javascript">
    var counterd = document.createElement("div");
    counterd.id='counterdiv';
    counterd.innerHTML = "(<?php echo $woocommerce->cart->cart_contents_count ?>)";
    document.getElementById('menu-item-130').appendChild(counterd);
    document.getElementById("counterdiv").setAttribute('onclick', 'location.href = "/varukorg"');
</script>

スタイルを変更する CSS は次のとおりです。

#menu-item-130:hover #counterdiv, #menu-item-130.current_page_item #counterdiv {
    color: black;
}

#menu-item-130スタイルを適用する CSS ルールもいくつかあります:hover。マウスが上に移動すると問題が発生し、テキストが黒#counterdivに変わります。要素がホバーされたときに親のイベントをトリガーしたくありません。のホバー CSSは次のとおりです。#counterdiv#counterdiv#menu-item

#menu-item-130 a:hover, #menu-item-130.current_page_item a {
    background: url(../images/cart-59-24black.png) gray 21px 18px no-repeat!important;
}

両方のdiv要素がプロパティposition:relative;を持っているので、試してみましz-indexたが、うまくいかないようです。div子をホバーするときに親のスタイルを変更することは不可能であることを私は知っています。

編集: こんにちは、ハードコードのような解決策を見つけましたが、うまくいきました ;) カウンター div が一番上にあったので、#menu-item-130 と同じサイズでホバー時に #counterdiv を作成し、同じ背景スタイルをそれに配置しましただから今その仕事。とにかく助けてくれてありがとう..

4

2 に答える 2

0

説明

あなた:hoverがすでに元気であっても、うまくいきます。しかし、 Propagationと呼ばれるものがあり、ブラウザはカーソルがどの親要素にあるかを検出し、この要素に関連するイベント/疑似要素/疑似クラスをトリガーします。この伝播を ( CSS で) 停止するには、子要素のプロパティで対抗する必要があります。

親の背景プロパティ: gray

子の背景プロパティ: transparent !important

何が明確に行われているかを理解するには、 CSS 特異性(MDN)!importantについてもっと読むことをお勧めします。

解決

!important次の概念を使用して、要素自体に透明な背景を適用します。

HTML

<div id="item-130">Item 130
    <div id="counterdiv">CounterDiv</div>
</div>

CSS

#item-130:hover > #counterdiv {
    background-color:gray;
}

#counterdiv:hover {
    background-color:transparent !important;
}

ライブデモ

于 2013-07-04T12:15:48.647 に答える