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

Posted 2023-03-06

【中文标题】使用引导程序悬停时切换到 glyphicons-white

【英文标题】：Switch to glyphicons-white on hover with bootstrap

【发布时间】：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 的代码却不行？

【参考方案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');
   
 );