鼠標懸停時切換圖標

Question

我在錨點中顯示Twitter Bootstrap提供的圖標之一。 當我將鼠標懸停在錨點上時，我希望將默認圖標切換為圖標白色。

效果應該是，當你將鼠標懸停在錨在導航欄像這里

怎么做？

Answer 1

您可以使用CSS偽類：hover設置不同的背景：

.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偽類插入font-icon：before：

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

它是一個輝煌的解決方案，如果你決定創建自己的圖標Web字體 。

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

Answer 5

使用CSS psuedo-class：hover ..

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

Answer 6

上面的某些答案無法正常工作，並且給出了所有字形圖標都為1的背景圖像。

這是我的作品。 請注意，我已經更改了圖標的顏色以適合我的需要。

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

Answer 7

我知道已經有一些快速的解決方案可以解決這個問題。 如果您想不使用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>