Javascript 如何通过仅将鼠标悬停在父对象上来设置子对象的样式？

在下面的代码中，当我将鼠标悬停在

灰色按钮上时

它在子div
条上执行某种样式

这就是我所需要的，我不想让孩子自己盘旋在空中


.foo{
宽度：200px；
高度：50px；
背景：灰色；
利润率：200px；
位置：相对位置；
}
巴兹先生{
位置：绝对位置；
宽度：50px；
高度：300px；
顶部：-150px；
左：80px；
z指数：-1；
边框：1px实心；
}
.酒吧{
身高：100%；
背景：url(https://images6.alphacoders.com/411/411189.jpg)无重复中心；
背景位置：封面；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit变换原点：左；
变换原点：左；
-webkit转换：-webkit转换0.25秒易用性；
转换：-webkit转换0.25秒易用性；
变换：变换0.25秒；
转换：转换0.25s易用性，-webkit转换0.25s易用性；
}
.foo:hover.bar{
-webkit转换：scaleX（1）；
变换：scaleX（1）；
-webkit转换原点：右；
变换原点：右；
}
这可能不是你想要的答案（和许多人一样，我更喜欢尽可能多地用纯CSS解决方案解决CSS问题），但你确实用
javascript
标记了你的问题，因此我认为用3行javascript解决你面临的问题是一种合法的方法：

const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);

这是因为事件
mouseover
和
mouseout
事件被显式添加到
foo
，而不是它的孙子
bar
（和
bar
从不明显重叠
foo
）

工作示例：


const foo=document.getElementsByClassName（'foo'）[0]；
foo.addEventListener（'mouseover'，（e）=>e.target.classList.add（'hovered'），false）；
foo.addEventListener（'mouseout'，（e）=>e.target.classList.remove（'hovered'），false）
.foo{
宽度：200px；
高度：50px；
背景：灰色；
利润率：200px；
位置：相对位置；
}
巴兹先生{
位置：绝对位置；
宽度：50px；
高度：300px；
顶部：-150px；
左：80px；
z指数：-1；
边框：1px实心；
}
.酒吧{
身高：100%；
背景：url(https://images6.alphacoders.com/411/411189.jpg)无重复中心；
背景位置：封面；
变换：scaleX（0）；
变换原点：左；
变换：变换0.25秒；
}
.foo.hovered.bar{
变换：scaleX（1）；
变换原点：右；
}
我猜您希望最终用户将鼠标悬停在水平区域（div.foo）上，使垂直区域（div.baz div.bar）发生更改，但如果div.baz本身处于悬停状态，则不希望该区域发生更改

这能解决你的问题吗


.foo{
宽度：200px；
高度：50px；
背景：灰色；
利润率：200px；
位置：相对位置；
}
巴兹先生{
位置：绝对位置；
宽度：50px；
高度：300px；
顶部：-150px；
左：80px；
z指数：-1；
边框：1px实心；
}
.酒吧{
身高：100%；
背景：url(https://images6.alphacoders.com/411/411189.jpg)无重复中心；
背景位置：封面；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit变换原点：左；
变换原点：左；
-webkit转换：-webkit转换0.25秒易用性；
转换：-webkit转换0.25秒易用性；
变换：变换0.25秒；
转换：转换0.25s易用性，-webkit转换0.25s易用性；
}
.foo:hover.baz:not（：hover）.bar{
-webkit转换：scaleX（1）；
变换：scaleX（1）；
-webkit转换原点：右；
变换原点：右；
}

请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。
.foo:hover.baz:当然不是（：hover.bar）
？这回答了你的问题吗@谢谢你。。。它起作用了✅@user1403588您所指的Q不同，我不喜欢设置父项的样式，我希望通过将鼠标悬停在父项上来限制子项的样式，这样子项本身就不能悬停