悬停时自定义导航栏折叠按钮

时间:2016-03-29 09:55:17

标签: html css twitter-bootstrap

当鼠标悬停在按钮上时,如何删除折叠按钮的背景。这是图片。当鼠标悬停在该按钮上时,我真的想要删除那个白色背景请帮助我。我是html和css的新手,也是bootstrap。

enter image description here

这是我的HTML代码

          <nav class ="navbar navbar-default" role= "navigation">
    <div class = "container">
        <div class ="navbar-header">
            <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
        </div>

        <div class="collapse navbar-collapse" id="nav-collapse">

            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">Students</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">Faculty</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">About us</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">Contact us</a></li>
              <li class="nav-divider"></li>

            </ul>
       </div>
      </div>
    </nav>

这是我的css代码。

        #fot{ position:fixed;
        bottom:0;
        } 
      .navbar-default{
       background-color:rgb(193,57,45);

       }
       .navbar .nav > li > a{
       color:#ffe6e6;
       }
      .navbar .nav > li > a:hover{
      color:#000000;
      }
    .navbar .nav .active > a{
    background-color:rgb(193,57,45);
    color:#000000;
    }
   .navbar .nav .active > a:hover{
    background:none;
    color:#fff;
    }
   .nav .nav-divider{
    height: 50px;
   margin: 0 10px;
   border-right: 1px solid #a92419;
   border-left: 1px solid #c1392d;
   }
  @media(max-width: 768px) 
  {
 .nav .nav-divider{
 height: 1px;
  margin: 0 10px;
    background-color:#a92419;   
    }


   .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
     margin:0 0 4px;
    width: 25px;
    height: 5px;

    }
  button.navbar-toggle{
  background:none;
  border:none;
  color:#000;

   }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #a92419; 
  } 
 }

3 个答案:

答案 0 :(得分:3)

您需要为hoverfocus指定背景颜色。 您可以通过将其添加到CSS中来实现:

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background: none;
}

这里有一个jsFiddle上面的代码:https://jsfiddle.net/AndrewL32/mowb6gcb/

答案 1 :(得分:0)

使用这个适用于悬停的css

button.navbar-toggle:hover{
  background:none;
  /* other css as you requirment*/
}

答案 2 :(得分:0)

这是正常的,直接的方式,使用psuedo类:hover在将鼠标悬停在项目上时为项目添加css样式

button.navbar-toggle {
    background: #ccc; //a gray background as default
}


button.navbar-toggle:hover {
    background: none; //no background when you hover over the button
}