html - 我们如何通过悬停其他东西来添加悬停效果，如下所示？（HTML，CSS3） - Thinbug

我们如何通过悬停其他东西来添加悬停效果，如下所示？（HTML，CSS3）

时间：2014-01-27 02:47:35

标签： html css css3

我做了两个div，我想要的是使用纯CSS并添加一些东西，比如当我将第一个div悬停时，另一个div会改变它的背景。
这是我的代码！

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hover Effects</title>
  <style type="text/css">
    #boxOne{
      background:grey;
      height:100px;
      width:100px;
      float:left;
    }
    #boxTwo{
      background:cyan;
      height:100px;
      width:100px;
      float:right;
    }
  </style>
</head>
<body>
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
</body>
</html>

1 个答案:

答案 0 :(得分：4)

假设他们是相邻的兄弟姐妹，您可以使用adjacent sibling combinator, +：

EXAMPLE HERE

#boxOne:hover + #boxTwo {
    background:red;
}

或者，您可以使用general sibling combinator, ~。两者都假设元素是后续兄弟姐妹，之前的兄弟姐妹将不会被选中。

#boxOne:hover ~ #boxTwo {
    background:red;
}