鼠标悬停的开关图标

我在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

鼠标悬停的开关图标

回答

相关问题