Question

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的代码没有？

Answer 1

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

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

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

Answer 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>

Answer 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');
   }
 );

使用bootstrap在悬停时切换到glyphicons-white

3 个答案: