3

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

当您将鼠标悬停在导航栏中的锚点上时，效果应该是这里

这是怎么做到的？

4

7 回答 7

4

在悬停时使用 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');
    });
});​
于 2012-07-23T15:23:04.463 回答
4

您使用 CSS 伪类 :hover 来设置不同的背景：

.menulink:hover { background-image: url('alternative_sprite.png'); }
于 2012-07-23T13:09:07.353 回答
1

只需切换 glyphicons 图像？

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

&:hover{
  i{
    background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
  }
于 2012-11-04T20:36:05.030 回答
1

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

font-family: 'FontAwesome';

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

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

如果您决定创建自己的图标 web 字体，这是一个绝妙的解决方案。

或者更好的是，您可以使用Font-Awesome。

于 2013-03-14T21:32:17.800 回答
0

使用 CSS 伪类 :hover..

.menulink:hover { background-image: url('myimage.png'); }
于 2012-07-23T13:11:06.390 回答
0

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

这对我有用。请注意，我已更改图标的颜色以满足我的需要。

a:hover > [class^="icon-"] {
    background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
于 2013-11-29T14:14:35.377 回答
0

我知道已经发布了一些可以解决问题的快速解决方案。如果您想在不使用 JQuery 或 CSS 的情况下实现这一点，我想添加我的解决方案：

  1. 创建一个$scope包含您想要默认设置的图标类名称的对象。

    $scope.myClass = "glyphicon glyphicon-ok"

  2. 添加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>
于 2016-02-10T17:25:36.673 回答