鼠标悬停的开关图标
您可以使用CSS伪类:悬停来设置不同的背景:
.menulink:hover { background-image: url('alternative_sprite.png'); }
使用CSS伪类:悬停..
.menulink:hover { background-image: url('myimage.png'); }
这与Twitter无关,它是常见的CSS东西。 – 2012-07-23 13:20:48
关于我的答案,你不必使用背景图像,而不只是背景作为上述答案? – 2012-07-23 13:21:35
不是。但我想有些人会认为它更清洁。我不会。 – 2012-07-23 13:22:42
使用jQuery toggleClass()上悬停将图标更改为白色。
看到这个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/>
脚本:
$("document").ready(function(){
$("a").hover(function(){
$('i').toggleClass('glyphicon-envelope glyphicon-print');
});
});
只是切换的glyphicons形象?
(从我的CSS,这是一个SASS版本中提取,而我的图片都在不同的地方,但你的想法...)
&:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}
其实,AngularJS网站使用web字体来显示图标:
font-family: 'FontAwesome';
而且他们使用插入字体图标CSS伪类:前:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
}
如果您解决create your own icon web font这是一个很棒的解决方案。
甚至更好,你可以使用Font-Awesome。
上面的一些答案不起作用,并给所有的glyphicons在一个背景图像。
这个作品形成了我。请注意,我已经改变了图标的颜色以适合我的需求。
a:hover > [class^="icon-"] {
background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
我知道已经有几个快速解决方案发布,可以做到这一点。我想补充我的解决方案,如果你想实现这一点没有使用JQuery或CSS:
-
木箱的
$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>
瑞典以及。如果您不介意可以随时登录twitter-bootstrap并在那里写信给“wingy”。 (Kul med svenska kontakter):) – wingy 2012-07-23 13:15:49
**注意:**它应该是'background-image:url('alternative_sprite.png');'Anders给出的答案实际上会覆盖'background-position'(at至少在FF)。 – 2013-08-22 15:17:52
谢谢你的纠正! – 2013-08-22 19:05:43