鼠標懸停的開關圖標

我在Twitter中顯示了一個Twitter Bootstrap提供的圖標。我想要將鼠標懸停在錨點上時，將默認圖標切換爲圖標白色。鼠標懸停的開關圖標

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

這是如何完成的？

2012-07-23 wingy

您可以使用CSS僞類：懸停來設置不同的背景：

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

來源

2012-07-23 13:09:07

瑞典以及。如果您不介意可以隨時登錄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

使用CSS僞類：懸停..

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

來源

2012-07-23 13:11:06

這與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>&nbsp;Click</div></a> 
<br/>

腳本：

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

來源

2012-07-23 15:23:04 Dmase05

只是切換的glyphicons形象？

（從我的CSS，這是一個SASS版本中提取，而我的圖片都在不同的地方，但你的想法...）

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

來源

2012-11-04 20:36:05

其實，AngularJS網站使用web字體來顯示圖標：

font-family: 'FontAwesome';

而且他們使用插入字體圖標CSS僞類：前：

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

如果您解決create your own icon web font這是一個很棒的解決方案。

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

來源

2013-03-14 21:32:17 Gileno

上面的一些答案不起作用，並給所有的glyphicons在一個背景圖像。

這個作品形成了我。請注意，我已經改變了圖標的顏色以適合我的需求。

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

來源

2013-11-29 14:14:35 Merlin

我知道已經有幾個快速解決方案發布，可以做到這一點。我想補充我的解決方案，如果你想實現這一點沒有使用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>

來源

2016-02-10 17:25:36 user2134466

鼠標懸停的開關圖標

回答

相關問題