Question

当它所在的按钮悬停在其上时，我试图更改 glyphicon-chevron-up 颜色

按钮：

.btn.btn-success.text-uppercase.m-b-xs.sort-button

Glyphicon（如果我将鼠标悬停在 Chevron 上，这会起作用）：

.glyphicon-chevron-up:hover:before

我正在努力

.btn.btn-success.text-uppercase.m-b-xs.sort-button:hover .glyphicon-chevron-up:hover:before {
   color: orange !important;
}

但只有当我直接将鼠标悬停在雪佛龙上时才有效

预先感谢您的帮助

Answer 1

您可以通过这种方式解决问题。

.btn:hover .glyphicon{
        color: red;
}

当您将鼠标悬停在按钮上时，glypicon 类中的内容颜色将变为红色。您可以使用您想要的颜色。

Answer 2

试试这个。它运行良好。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
     <style>
        .btn:hover .glyphicon{
            color: red;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Chevron-left Glyph</h2>
      <p>Chevron-left icon: <span class="glyphicon glyphicon-chevron-left"></span></p>    
      <p>Chevron-left icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
      </p>
      <p>Chevron-left icon on a button:
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-left"></span> Left
        </button>
      </p>
      <p>Chevron-left icon on a styled link button:
        <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-chevron-left"></span> Left
        </a>
      </p> 
    </div>
  </body>
</html>

使用下面的运行代码片段按钮运行它。让我知道它是否有效。

当按钮悬停在 CSS 上时，更改按钮上 Glyphicon 的悬停颜色

2 个答案: