Question

这是我的HTML代码

<body>

  <div id="b">    
    <div id="one"><div>
  </div>

  </div id="a">    
  </div>

</body>

继承我的css代码（我已经尝试将＃34;〜，+，＆gt;＆＃34;悬停在我希望设计的元素之间，但这些似乎都不起作用！

#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); } }

Answer 1

CSS不允许您选择兄弟元素并为其应用样式。如果你想以现在的方式保留DOM结构，你需要使用Javascript来实现你想要的。

如果您可以灵活地更改HTML结构，请考虑封装＆＃34; a＆＃34;和＆＃34; b＆＃34;在容器内部进行div，并为容器应用悬停样式而不是＆＃34; a＆＃34; （但是，这和说＆＃34; b.hover＆＃34;）

一样好

Answer 2

+和〜选择器获取当前节点之后的兄弟节点。以前的兄弟姐妹没有选择器。您需要使用javascript为这些节点应用样式。

＆＃13;

var divA = document.getElementById('a');

divA.addEventListener('mouseover', function() {
  document.getElementById('b').children[0].style.backgroundColor = 'green';
});

＆＃13;

#one {
  background-color: yellow;
}

＆＃13;

<div id="b">   
This is b
  <div id="one">This is one</div>
</div>

<div id="a">This is a  
</div>

＆＃13;

将#a悬停在样式#one上，其中#one是#b的子元素，＃b是#a的兄弟元素

2 个答案: