-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;
}

我也有一些 CSS 规则来设置样式#menu-item-130。:hover鼠标移过时会出现问题#counterdiv，它将#counterdiv文本更改为黑色。我不希望#counterdiv元素在悬停时触发父事件。的悬停 CSS#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 在顶部，我将悬停时的 #counterdiv 设置为与 #menu-item-130 相同的大小，并为其设置了相同的背景样式所以现在它的工作。无论如何感谢您的帮助..

4

2 回答 2

0

我不确定我是否理解您的问题，但这里有一个示例如何为您工作：

演示

于 2013-07-04T12:08:58.057 回答
0

解释

:hover即使你已经很好，也可以正常工作。但是有一种叫做传播的东西，它会让浏览器检测到你的光标在哪个父元素中，并触发与这个元素相关的事件/伪元素/伪类。为了阻止这种传播（在 CSS 中），您需要使用子元素的属性来对抗它。

父母的背景属性： gray

孩子的背景属性： transparent !important

要!important清楚地了解什么，我建议您阅读更多关于CSS Specificity (MDN)

解决方案

使用以下概念为元素本身应用透明背景!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 回答