一次选择 2 个元素用于 :hover答案

【问题标题】：Select 2 elements at once for :hover一次选择 2 个元素用于 :hover
【发布时间】：2016-12-05 20:33:39
【问题描述】：

<!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>

你好！我一直想知道如何为 CSS 一次选择两个元素。我想让它们改变颜色悬停，虽然我知道如何使用 :hover ，但我遇到了困境。我希望我的 col-md-2 div 和我的 li 在悬停时改变颜色。我知道颜色变化的属性，现在，将鼠标悬停在列表项上的单词上会改变列表项和 col-md-2 的颜色。当悬停在单词周围的空间上时，它会更改侧面的颜色（与 col-md-2 之间的额外间距），但不会更改列表项中单词的后面。我需要一次更改 2 个元素的颜色。我如何一次选择 2 个元素以希望通过我的 CSS 同时影响这两个元素？最好不使用任何 JQuery 或任何类似的东西。使用当今的标准、HTML5、CSS3、Bootstrap 的最新版本。

【问题讨论】：

"message": "Error: Bootstrap's JavaScript requires jQuery", "filename": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", "lineno": 6, "colno": 37
首先...您的 HTML 标记无效...您不能将div 直接嵌套在ul 下，只能嵌套li
首先修复您的 HTML。 ul 中允许的唯一 直接子元素 是li - 不允许其他任何元素。
除了div's 之外，您还可以将引导类放在其他东西上。例如：<ul class="row"> <li class="col-md-2"></li> </ul> 很好。你不需要所有那些额外的div's。您还缺少必需的引导程序 .container。
看到那些看似对 HTML 和 CSS 基础知识知之甚少的人使用 Bootstrap 之类的框架，我感到非常厌烦。这是错误的做法！

标签： html css

【解决方案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;
}

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

【讨论】：