twitter-bootstrap 使用引导程序在悬停时切换到 glyphicons-white
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13787083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Switch to glyphicons-white on hover with bootstrap
提问by Nick Ginanto
bootstrap states that
引导程序指出
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
也有可用于倒置（白色）图标的样式，通过一个额外的类做好准备。我们将专门针对导航和下拉链接的悬停和活动状态强制执行此类。
this doesn't seems to be working on my navbar (parts omitted for sake of simplicity). This is the div chain.
这似乎不适用于我的导航栏（为简单起见省略了部分）。这是 div 链。
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="navbar-inner ">
<div class="container">
<div class="nav-collapse collapse ">
<ul class="nav" >
<li><%= link_to content_tag(:i," ", :class=>"icon-envelope")+ " " +"Messages, messages_path %> </li>
the css code from bootstrap is
bootstrap 的 css 代码是
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url(/assets/twitter/bootstrap/glyphicons-halflings-white.png);
}
The switch does happen with this css code
这个 css 代码确实发生了切换
.navbar-inverse .nav a:hover [class^="icon-"],
.navbar-inverse .nav a:hover [class*=" icon-"]{
background-image: url(<%= asset_path "/assets/twitter/bootstrap/glyphicons-halflings-white.png" %>);
}
should I add anything or did I miss anything? Why does my css works but bootstrap's code doesn't?
我应该添加任何东西还是我错过了什么？为什么我的 css 有效，但 bootstrap 的代码无效？
回答by Yann Chabot
If you only have to add one class to your image with bootstrap, I'd suggest you to use jQuery to add the class on hover and remove to class on mouseOut. How? Here's a good way :
如果您只需要使用引导程序向图像添加一个类，我建议您使用 jQuery 在悬停时添加类并在 mouseOut 上删除到类。如何？这是一个好方法：
$("yourSelector").hover(
function () {
$(this).toggleClass('datWhiteClass');
},
function () {
$(this).toggleClass('datWhiteClass');
}
);
In this case, the first function is what happen on the mouseover and the second when the hover state is not true anymore! Hope it helped!
在这种情况下，第一个函数是鼠标悬停时发生的事情，第二个函数是当悬停状态不再为真时！希望有帮助！
回答by Aaron
You can do this in a simpler way with only css.
您可以仅使用 css 以更简单的方式执行此操作。
<style>
#my-button:hover {
background-color: #0000ff;
}
#my-button:hover span {
color: #ffffff;
}
</style>
<button id="my-button">
<span class="glyphicon glyphicon-pencil"></span>
</button>
回答by feitla
Add one class with different color icons
添加一个具有不同颜色图标的类
.icon-teal {background-image: url("../images/icons/glyphicons-halflings-teal.png") !important;}
Then use jQuery to toggle Class
然后使用jQuery来切换Class
$("div.row_action a").hover(
function () {
$(this).toggleClass('icon-teal');
},
function () {
$(this).toggleClass('icon-teal');
}
);
