Question

我在一个锚中显示了一个Twitter Bootstrap提供的图标。我希望当鼠标悬停在锚点上时，默认图标会切换为图标 - 白色。

当您将鼠标悬停在导航栏here

中的锚点上时，效果应该类似

这是怎么做到的？

Answer 1

您使用CSS伪类：悬停以设置不同的背景：

.menulink:hover { background-image: url('alternative_sprite.png'); }

Answer 2

在悬停时使用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>&nbsp;Click</div></a>
<br/>

脚本：

$("document").ready(function(){
    $("a").hover(function(){
        $('i').toggleClass('glyphicon-envelope glyphicon-print');
    });
});

Answer 3

只需切换字形图像？

（从我的CSS中提取，这是一个sass版本，我的图像在不同的地方，但你明白了......）

&:hover{
  i{
    background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
  }

Answer 4

实际上，AngularJS网站使用webfont来显示图标：

font-family: 'FontAwesome';

他们使用CSS伪类插入字体图标：before：

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: FontAwesome;
}

如果您决定create your own icon web font，这是一个出色的解决方案。

甚至更好，您可以使用Font-Awesome。

Answer 5

使用CSS伪类：悬停..

.menulink:hover { background-image: url('myimage.png'); }

Answer 6

上面的一些答案不起作用，并给出背景图像，其中所有的字形都在一个。

这是我的作品。请注意，我已经更改了图标的颜色以满足我的需求。

a:hover > [class^="icon-"] {
    background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}

Answer 7

我知道已经发布了一些可以解决问题的快速解决方案。如果您想在不使用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>

鼠标悬停上切换图标

7 个答案: