使用 CSS 更改悬停时多个元素的属性

Question

我有两个相邻的 div 元素，如果用户将鼠标悬停在其中一个上，我想更改它们的属性 background-color。

因此，两个 div 的背景颜色最初应设置为 #d8d8d8，如果我将鼠标悬停在其中一个 div 上，则应在两个 div 上更改为 #cacaca。

我用 jquery 解决了：

$("#FOO").hover
(
  function()
  {
      $(this).css("background-color","#CACACA");
      $("#BAR").css("background-color","#CACACA");
  },
  function()
  {
     $(this).css("background-color","#D8D8D8");
     $("#BAR").css("background-color","#D8D8D8");
  }
)

$("#BAR").hover
(
  function()
  {
      $(this).css("background-color","#CACACA");
      $("#FOO").css("background-color","#CACACA");
  },
  function()
  {
     $(this).css("background-color","#D8D8D8");
     $("#FOO").css("background-color","#D8D8D8");
  }
)

.buttons {
  border:1px solid black; 
  background-color: #D8D8D8;

  height: 100px;

  font-family: play;
  font-size: 30px;

  text-align:center;
  vertical-align: middle;
  line-height: 100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-10 buttons" id="FOO" style="border-right: 0px">
  <span style="padding-left:100px">FOO</span>
</div>
<div class="col-xs-2 buttons" id="BAR" style="border-left: 0px">
  <span>BAR</span>
</div>

有没有更好的方法来实现这一点？也许只有 css？

Answer 1

您可以将列包装在div 中并在其上添加:hover：

.buttons {
  border:1px solid black; 
  background-color: #D8D8D8;

  height: 100px;

  font-family: play;
  font-size: 30px;

  text-align:center;
  vertical-align: middle;
  line-height: 100px; 
}

.row:hover > .buttons {
    background-color: #CACACA;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row'>
  <div class="col-xs-10 buttons" id="FOO" style="border-right: 0px">
    <span style="padding-left:100px">FOO</span>
  </div>
  <div class="col-xs-2 buttons" id="BAR" style="border-left: 0px">
    <span>BAR</span>
  </div>
</div>

Answer 2

我会给两个 div 相同的 css 类，如下所示：

<div class="col-xs-10 buttons buttonset1" id="FOO" style="border-right: 0px">
  <span style="padding-left:100px">FOO</span>
</div>
<div class="col-xs-2 buttons buttonset1" id="BAR" style="border-left: 0px">
  <span>BAR</span>
</div>

然后在jquery中你可以制定如下规则：

$(".buttonset1").hover
(
  function()
  {
      $(".buttonset1").css("background-color","#CACACA");
  },
  function()
  {
      $(".buttonset1").css("background-color","#D8D8D8");
  }
)

这样你会更灵活。