Question

＆＃13;

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Raleway CSS -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

  <!-- CSS File Connection -->
  <link rel="stylesheet" type="text/css" href="CSS/styles.css">

</head>

<body>
  <!-- Info for JQuery & Windows Configuery.js"></script>
    		<!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="Hello World"></script>
  <div class="header">
    <ul>
      <div class="row">
        <div class="col-md-2">
          <li>Home</li>
        </div>

        <div class="col-md-2">
          <li>Information</li>
        </div>

        <div class="col-md-2">
          <li>History</li>
        </div>

        <div class="col-md-2">
          <li>Testimonies</li>
        </div>

        <div class="col-md-2">
          <li>Contact</li>
        </div>

        <div class="col-md-2">
          <li>BOOK US</li>
        </div>

      </div>
    </ul>
  </div>

</body>

</html>

＆＃13;

您好！我一直想知道如何一次为CSS选择两个元素。我想让它们改变颜色悬停，虽然我知道如何使用：悬停，我陷入了两难境地。我希望我的col-md-2 div和我的李在他们盘旋时改变颜色。我知道颜色更改属性，现在，将鼠标悬停在列表项上的单词将更改列表项和col-md-2的颜色。当悬停在单词周围的空间时，它会改变两侧的颜色（与col-md-2的额外间距），但不会改变列表项中的单词。我需要一次更改2个元素的颜色。我如何一次选择2个元素，希望能同时影响我的CSS？最好不要使用任何JQuery或任何类型的东西。使用今天的标准，HTML5，CSS3，最新版本的Bootstrap。

Answer 1

使用col-md-2:hover和col-md-2:hover li来获取两个元素中的更改样式。

.col-md-2:hover{
  background-color:red;
  color:blue;
}
.col-md-2:hover li{
  color:green;
}

但请在li或ol标记内使用ul。因为它是使用li元素
的推荐语法

一次选择2个元素：悬停

1 个答案: