在按钮悬停时更改字形图标的颜色

Question

我有一个按钮，上面叠加了信息glyphicon。

当我将鼠标悬停在按钮（不是字形图标）上时，如何使 glyphicon 的颜色发生变化？我需要这样做，因为按钮在悬停时也会改变颜色。

CSS 和 HTML

---

.glyphicon {
  position: absolute;
  right: 5px;
  top: 70px;
  color: #6B3E80;
  font-family: 'Glyphicons Halflings';
  font-weight: normal;
  font-size: 14px;
}

.btn {
    padding: 14px 24px;
    border: 4px solid #6B3E80;
    color: #6B3E80;
    font-family: Futura;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}
 
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}
 
.btn-primary {
    background: #ffffff;
    color: #6B3E80;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: gray;
    border: 4px solid gray;
    color: #ffffff;
}
 
.btn-primary:active, .btn-primary.active {
    background: gray;
    box-shadow: none;
}

.btn-primary:active:focus {
  color: #ffffff; 
  background-color: gray; 
  border-color: gray;
}

.btn.sharp {
  border-radius:0;
}

.btn-xlarge {
    padding: 18px 75px;
    font-size: 40px;
    line-height: normal;
    width: 275px;
}

      <div class="row">
        <div class="span12 pagination-centered">
          <div class="btn-group">
            <a href="who.html" class="btn btn-primary btn-xlarge">BUTTON1<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle= "tooltip" data-placement="bottom" title="tooltip1"></span></a>
           </div>
           <div class="btn-group">
            <a href="what.html" class="btn btn-primary btn-xlarge">BUTTON2<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="tooltip2"></span></a>
          </div>
        </div>
        </div>
      </div>

Answer 1

您只需将这段代码添加到您的 css 中，如果相应的按钮悬停在上面，则字形图标会改变颜色。

.btn:hover .glyphicon{
    color:#fff;
}

---

在这里检查这个工作小提琴：fiddle

---

.glyphicon {
  position: absolute;
  right: 5px;
  top: 70px;
  color: #6B3E80;
  font-family: 'Glyphicons Halflings';
  font-weight: normal;
  font-size: 14px;
}
.btn {
  padding: 14px 24px;
  border: 4px solid #6B3E80;
  color: #6B3E80;
  font-family: Futura;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
}
.btn-primary {
  background: #ffffff;
  color: #6B3E80;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background: gray;
  border: 4px solid gray;
  color: #ffffff;
}
.btn-primary:active,
.btn-primary.active {
  background: gray;
  box-shadow: none;
}
.btn-primary:active:focus {
  color: #ffffff;
  background-color: gray;
  border-color: gray;
}
.btn.sharp {
  border-radius: 0;
}
.btn-xlarge {
  padding: 18px 75px;
  font-size: 40px;
  line-height: normal;
  width: 275px;
}
.btn:hover .glyphicon {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="span12 pagination-centered">
    <div class="btn-group">
      <a href="who.html" class="btn btn-primary btn-xlarge">BUTTON1<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle= "tooltip" data-placement="bottom" title="tooltip1"></span></a>
    </div>
    <div class="btn-group">
      <a href="what.html" class="btn btn-primary btn-xlarge">BUTTON2<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="tooltip2"></span></a>
    </div>
  </div>
</div>