使用引导程序悬停时切换到 glyphicons-white答案

【问题标题】：Switch to glyphicons-white on hover with bootstrap使用引导程序悬停时切换到 glyphicons-white
【发布时间】：2012-11-27 01:08:51
【问题描述】：

bootstrap 声明

还有一些样式可用于倒置（白色）图标，准备就绪加一门课。我们将专门在悬停时强制执行此类以及导航和下拉链接的活动状态。

这似乎不适用于我的导航栏（为简单起见，省略了部分）。这是 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>

来自 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);
}

这个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" %>);

}

我应该添加什么还是我错过了什么？为什么我的 css 可以工作，而 bootstrap 的代码却不行？

【问题讨论】：

标签： css ruby-on-rails-3 twitter-bootstrap hover glyphicons

【解决方案1】：

如果您只需要使用引导程序向图像添加一个类，我建议您使用 jQuery 在悬停时添加类并在 mouseOut 上删除类。如何？这是一个好方法：

    $("yourSelector").hover(
       function () {
         $(this).toggleClass('datWhiteClass');
       }, 
      function () {
          $(this).toggleClass('datWhiteClass');
       }
     );

在这种情况下，第一个函数是鼠标悬停时发生的事情，第二个函数是当悬停状态不再为真时发生的事情！希望对您有所帮助！

【讨论】：

【解决方案2】：

你可以用更简单的方式做到这一点，只需要 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>

【讨论】：

【解决方案3】：

添加一个具有不同颜色图标的类

.icon-teal {background-image: url("../images/icons/glyphicons-halflings-teal.png") !important;}

然后使用jQuery切换Class

$("div.row_action a").hover(
   function () {
    $(this).toggleClass('icon-teal');
   }, 
  function () {
     $(this).toggleClass('icon-teal');
   }
 );

【讨论】：