在按钮悬停时更改glyphicon的颜色

Morgan 发表于 Dev

摩根

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

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

鲜明

如果将鼠标悬停在相应的按钮上，则只需将这段代码添加到CSS中，即可使glyphicon更改颜色。

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

点击此处查看该工作小提琴：小提琴

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。