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元素在其被徘徊时触发父事件。 #menu-item的悬停CSS如下：< / p>

#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相同的大小并且使用相同的背景它的风格现在它的工作。无论如何，谢谢你的帮助..

Answer 1

我不确定我是否理解你的问题，但这里有一个例子说明它如何适合你：

DEMO

Answer 2

说明

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

悬停div来改变另一个div

HTML

2 个答案:

说明

解决方案

HTML

CSS

Live Demo