悬停 div 以更改另一个 div答案

【问题标题】：hover div to change an other div悬停 div 以更改另一个 div
【发布时间】：2013-07-02 10:14:52
【问题描述】：

如何防止子 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 规则可以在 :hover 上设置 #menu-item-130 的样式。当鼠标移过#counterdiv 时会出现问题，它会将#counterdiv 文本更改为黑色。 我不希望 #counterdiv 元素在悬停时触发父级事件。 #menu-item 的悬停 CSS 如下：

#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 相同的大小并放置相同的背景风格，所以现在它的工作。无论如何感谢您的帮助..

【问题讨论】：

请添加小提琴并显示您的 html 代码
我认为这个问题很好。不需要每个人都包含他们工作的现场演示，尤其是对于 2 div 问题。

标签： css html hover

【解决方案1】：

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

DEMO

【讨论】：

【解决方案2】：

说明

:hover 即使你已经很好，也可以正常工作。但是有一个叫做propagation的东西，它会让浏览器检测你的光标在哪个父元素中，并触发与这个元素相关的事件/伪元素/伪类。为了阻止这种传播，（在 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;
}

Live Demo

【讨论】：

使用 specificity 而不是 !important 怎么样？
我提个建议，我不是他的手，也不是头；他为所欲为。
是的。但是，如果我正在帮助某人并且我知道 specificity 和如何正确使用 !important 之间的区别，那么我会向他们展示最佳/正确的解决方案。不仅仅是 a 解决方案。我认为!important 应该被用作绝对的最后手段。
不落入基于意见的答案真的很难。有时候让人们自己找到答案也比较好，做作业总是有限制的，比如不要在上面签上我的名字。