如何在div标签内的悬停上更改字形图标的颜色？
[英]How to change glyph icon color on hover inside div tag?
问题描述
我想将不同的颜色显示在悬停上的字形图标上。
这是我的代码：
<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"> TRADING</span>
</div>
的CSS
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
当用户将光标放在div标签上时，现在仅更改文本颜色。但是我想更改文本颜色：白色，同时更改字形图标的颜色：＃44c5ff;
.glyphicon:hover当用户将光标完全放在glyphicon上时，它会起作用。 但不在div标签中。
谢谢
2 个解决方案
解决方案1
0 2016-10-10 10:33:41
<!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>
解决方案2
0 2016-10-10 10:36:28
.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; }
<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"> TRADING</span> </div>
.span-hover:hover .glyphicon{ color:#44c5ff; }
ton>将鼠标悬停在<a>标签上以更改标签内的按钮</a><a>颜色</a>
[英]ton>Hover over an <a> tag to change a button color inside the <a> tag
如何在同一 div 中使用 jquery hover 和 html 标签
[英]How to use jquery hover for a div and an html tag inside the same div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.