Question

我们如何同时将鼠标悬停在html中的多个div上？

我在html页面的不同位置有两个div。

我想悬停在任何一个div上，而另一个div则被选中。

如何才能使用优选的css属性来完成它？目前它从父母到孩子而不是反过来，我尝试了所有不同的组合。甚至〜和+属性。

html代码：

<div id=one1>
<div id=two2></div>
</div>

的CSS：

#one1:hover { background-color: yellow;}
#two2:hover { background-color: yellow;}

Answer 1

您的意思是 Fiddle

#one:hover ~ #two , 
#one:hover ~ #three  
{ background-color: yellow; }

Answer 2

如果您的结构与下面的结构类似，那么您只需在div上向孩子.parent:hover添加特定样式：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent:hover .child{your style goes here}

Answer 3

使用toggleClass

的Jquery解决方案

$(document).ready(function() {
  $('.box').click(function() {
    $('.box').toggleClass('green');
  });
});

<强> HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box {
    width:100px;
    height: 100px;
    border:1px solid grey;
    display: inline-block;
}

.green {
    background-color: lightgreen;
}