CSS 鼠标悬停时切换图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11613157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Switch icon on mouse hover
提问by wingy
I'm displaying one of the Twitter Bootstrap provided icons in an anchor. I want the default icon to be switched to icon-white when i have the mouse over the anchor.
我在锚点中显示 Twitter Bootstrap 提供的图标之一。当我将鼠标悬停在锚点上时，我希望将默认图标切换为白色图标。
The effect should be like when you hover over the anchors in the navbar here
效果应该是，当你将鼠标悬停在锚在导航栏像这里
How is this done?
这是怎么做的？
回答by Dmase05
Use jQuery toggleClass() on hover to change the icon to white.
在悬停时使用 jQuery toggleClass() 将图标更改为白色。
See this jsfiddle.
HTML:
看到这个jsfiddle。
HTML：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#"><div class="btn btn-primary">
<i class="glyphicon glyphicon-print"></i> Click</div></a>
<br/>
Script:
脚本：
$("document").ready(function(){
$("a").hover(function(){
$('i').toggleClass('glyphicon-envelope glyphicon-print');
});
});?
回答by Anders Arpi
You use the CSS pseudo-class :hover to set a different background:
您可以使用 CSS 伪类 :hover 来设置不同的背景：
.menulink:hover { background-image: url('alternative_sprite.png'); }
回答by Damon Mannion
just switch over the glyphicons image?
只是切换字形图像？
(extracted from my css, which is a sass version, and my images are in a different place, but you get the idea...)
（从我的 css 中提取，这是一个 sass 版本，我的图片在不同的地方，但你明白了......）
&:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}
回答by Gileno
Actually, the AngularJS website uses a webfont to display icons:
实际上，AngularJS 网站使用 webfont 来显示图标：
font-family: 'FontAwesome';
And they insert the font-icon using CSS pseudo-class :before:
他们使用 CSS 伪类插入字体图标：before：
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
}
Which it is a brilliant solution, if you resolve to create your own icon web font.
如果您决心创建自己的图标 Web 字体，这是一个绝妙的解决方案。
Or even better, you can use Font-Awesome.
或者更好的是，您可以使用Font-Awesome。
回答by Merlin
Some of the answer above are not working and give a background image with all glyphicons at ones.
上面的一些答案不起作用，并给出了一个带有所有字形的背景图像。
This works form me. Notice that I have changed the color of the icons to fits my needs.
这对我有用。请注意，我已更改图标的颜色以满足我的需要。
a:hover > [class^="icon-"] {
background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
回答by user2134466
I know there are already a few quick solutions posted that will do the trick. I would like to add my solution if you would like to achieve this without using JQuery or CSS:
我知道已经发布了一些可以解决问题的快速解决方案。如果您想在不使用 JQuery 或 CSS 的情况下实现这一点，我想添加我的解决方案：
Crate an
$scopeobject that contains the name of the icon class your would like to set by default.$scope.myClass = "glyphicon glyphicon-ok"Add
ng-classdirective and get the class name from$scope.MyClass, addng-mouseoverandng-mouseleavedirectives and change$scope.MyClassvalue<span ng-class="myClass" ng-mouseover="myClass = 'glyphicon glyphicon-remove'" ng-mouseleave="myClass = 'glyphicon glyphicon-ok'"> </span>
Crate 一个
$scope对象，其中包含您希望默认设置的图标类的名称。$scope.myClass = "glyphicon glyphicon-ok"添加
ng-class指令并从中获取类名$scope.MyClass，添加ng-mouseover和ng-mouseleave指令并更改$scope.MyClass值<span ng-class="myClass" ng-mouseover="myClass = 'glyphicon glyphicon-remove'" ng-mouseleave="myClass = 'glyphicon glyphicon-ok'"> </span>
回答by Andreas Nilsson
Use CSS psuedo-class :hover..
使用 CSS 伪类 :hover..
.menulink:hover { background-image: url('myimage.png'); }
