Question

我想在悬停时向字形图标显示不同的颜色。

这是我的代码：

runmqakm -cert -create -label ibmwebspheremqqm_qmname -stashed -dn "CN=corp.com,OU=DEV,OU=QMGR,O=CGI,L=member,ST=NC,C=US,EMAIL=name.surname@corp.com" -fips -db key.kdb -ca false

CSS

<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
      <span class="glyphicon glyphicon-globe"></span>
      <span class="hidden-xs">&nbsp;TRADING</span>
  </div>

当用户将光标放在div标签上时，现在它只改变文字颜色。但我想改变文字颜色：白色和同时字形图标颜色：＃44c5ff;

当用户将光标准确地放在glyphicon上时，

.span-hover:hover { background-color: rgba(0,0,0,0.4); color:white; } .glyphicon { font-size: 25px; color:red; } .glyphicon:hover { color:#44c5ff; }它正在工作。但不是div标签。

由于

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.glyphicon:hover{
color:#44c5ff;
font-size:30px;
}
</style>
  </head>

  <body>
    <div class="container">
      <h2>Glyphicon Examples</h2>
      <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>    
      <p>Envelope icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-envelope"></span>
        </a>
      </p>
      <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
      <p>Search icon on a button:
        <button type="button" class="btn btn-default">
          <span class="glyphicon glyphicon-search"></span> Search
        </button>
      </p>
      <p>Search icon on a styled button:
        <button type="button" class="btn btn-info">
          <span class="glyphicon glyphicon-search"></span> Search
        </button>
      </p>
      <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>      
      <p>Print icon on a styled link button:
        <a href="#" class="btn btn-success btn-lg">
          <span class="glyphicon glyphicon-print"></span> Print 
        </a>
      </p> 
    </div>
    
  </body>
</html>

＆＃13;

＆＃13; 尝试一次

Answer 2

＆＃13;

.span-hover:hover {                
    background-color: rgba(0,0,0,0.4);
    color:white;
}
.glyphicon
{
    font-size: 25px;
    color:red;
}
.glyphicon:hover
{
    color:#44c5ff;
}
.span-hover:hover .glyphicon{
  color:#44c5ff;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
  <span class="glyphicon glyphicon-globe"></span>
  <span class="hidden-xs">&nbsp;TRADING</span>
</div>

＆＃13;

＆＃13; 试试这个片段。你可以使用这种类型的悬停

.span-hover:hover .glyphicon{ color:#44c5ff; }

如何在div标签内悬停时更改字形图标颜色？

2 个答案: