2

引导程序指出

还有一些样式可用于倒置（白色）图标，并准备好一个额外的类。我们将专门针对导航和下拉链接的悬停和活动状态强制执行此类。

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

引导程序中的 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 的代码却不行？

4

3 回答 3

4

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

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

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

于 2012-12-09T14:40:15.063 回答
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>
于 2014-09-02T16:58:52.047 回答
1

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

.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');
   }
 );
于 2013-06-12T17:34:02.603 回答