这是我的html代码
<body>
<div id="b">
<div id="one"><div>
</div>
</div id="a">
</div>
</body>
这是我的CSS代码（我曾尝试将“〜，+，>”放在悬停和我希望设置样式的元素之间，但这些似乎都不起作用！
#a:hover #one{
background: white;
-webkit-animation:spin 1s ease-in-out;
-moz-animation:spin 1s ease-in-out;
animation:spin 1s ease-in-out;
animation-iteration-count: infinite;
animation-delay: 1s;
opacity:1;
transition-delay:0s;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(180deg);
transform:rotate(180deg); } }
最佳答案
CSS不允许您选择同级元素并对其应用样式。如果要以现在的方式保留DOM结构，则需要使用Javascript实现所需的功能。
如果您灵活地稍稍更改了HTML结构，请考虑将“ a”和“ b” div封装在容器中，并为该容器而不是“ a”应用悬停样式（但是，这和说“ b”一样好。徘徊”）
关于html - 将#a悬停在#one上，其中#one是#b的子元素，而#b是#a的同级元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50558371/