Html 使用CSS将鼠标悬停在重叠元素上时的样式悬停状态

我有一个包含几个div的DOM结构。从视觉上看，其中一些div是其他div的子div，但在DOM结构中，它们都是兄弟div

我需要设置“父”div的悬停状态的样式，即使悬停在其“子”div上

有没有一种不用Javscript就可以做到这一点的方法？也许通过使用div的当前位置来知道它们在另一个div中

---

更新

---

问题是父母实际上是兄弟姐妹。只有一个容器，假设有8个儿童div。2个是较大的分区，其他6个分区在每个较大分区内显示3个。类似于：

#container:hover .parent { /* Hover styles applied */ }

只有悬停子对象周围的父对象才应更改颜色

---

顺便说一句，我无法更改DOM结构。

如何使用一个容器包围所有元素，然后执行以下操作：

#container:hover .parent { /* Hover styles applied */ }

---

例如：

如果样式在悬停DOM同级时生效，您应该只能够使用同级选择器：

.parent:hover ~ .child { /* styling */ }

我想不出一个干净的（甚至是黑的）方法来使用CSS。如果您不了解其他内容，这里有一个Javascript方法。只需在

body

上捕获

mousemove

功能isOver（元素e）{
var left=element.offsetLeft，
top=元素偏移量，
right=left+element.clientWidth，
底部=顶部+元素.clientHeight；
返回（e.pageX>left&&e.pageXtop&&e.pageY

演示：

HTML:

CSS:

#父级{
边框：1px纯红；
高度：100px；
左：50px；
位置：相对位置；
顶部：50px；
宽度：100px；
}
#重叠{
背景颜色：蓝色；
边框：1px纯蓝色；
高度：100px；
左：115px；
位置：绝对位置；
顶部：130像素；
宽度：100px；
z指数：1；
}

脚本：

document.body.addEventListener（'mousemove'，函数（事件）{
if（isOver（document.getElementById（'parent'），事件））{
document.getElementById（'parent'）。innerHTML='is over！'；
}否则{
document.getElementById（'parent'）。innerHTML=''；
};
}，假）；
功能isOver（元素e）{
var left=element.offsetLeft，
top=元素偏移量，
right=left+element.clientWidth，
底部=顶部+元素.clientHeight；
返回（e.pageX>left&&e.pageXtop&&e.pageY

不，您不能仅通过CSS影响父母或以前的兄弟姐妹。只跟随兄弟姐妹，这对你没有帮助

任何其他人想要一个

：父类
伪类？
不能做的事情可以（经常）伪造。虽然最简单的解决方案是重新设置DOM的范围并使用相邻的同级选择器，但还有另一种方法，即a）更复杂b）需要现代浏览器

可以使用伪元素在父对象上模拟悬停效果。所述伪元素仅在其父元素悬停时可见（在本例中为：），并绝对定位以补偿
.childs
与
.parent
的偏移，覆盖
.parent
，因此看起来像是父元素已更改的状态

.
您能发布一些示例标记，并展示您希望发生的事情吗？在悬停父div的一个子元素时，似乎要设置父div的样式？此类计算只能使用JavaScript完成。CSS3中有一个同级选择器：这意味着您正在为浏览器的现代版本开发。@Brianhover为什么不使用相邻的同级选择器？@Wex-因为原始请求是“几个”同级。另外，我不知道有一个相邻的同级选择器。谷歌让我失望了：（这将设置子元素的样式，而不是父元素。我想OP希望鼠标移到“父元素”上元素。例如，同级可以只重叠一个角。完全相同。并且可以有多个父级。谢谢。是的，如果没有可用的CSS解决方案，这应该可以工作。伪类将选择什么？与
：父级
相同：不（：空）
？
div p:parent
会选择包含p元素的div元素，例如。这就像一个Linux命令：
cd/files/images/./
，最终会进入
/files
目录。我知道他无法更改DOM。只是想在提供一个不变的解决方案之前分享一下我的想法他是多姆。