Customizing Navbar collapse button when hover - html

Question

How to remove the background of the collapse button when the mouse hover to the button. here is the picture. I really want to remove that white background when mouse hover to that button please help me. Im new to html and css and also to bootstrap.
Here is my html code
<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">Students</li>
<li class="nav-divider"></li>
<li>Faculty</li>
<li class="nav-divider"></li>
<li>About us</li>
<li class="nav-divider"></li>
<li>Contact us</li>
<li class="nav-divider"></li>
</ul>
</div>
</div>
</nav>
Here is my css code.
#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;
}
}

Answer 1

You need to specify the background-color for both hover as well as focus.
You can do that by adding this to your CSS:
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background: none;
}
Here's a jsFiddle with the above code: https://jsfiddle.net/AndrewL32/mowb6gcb/

Answer 2

use this css which works on hover
button.navbar-toggle:hover{
background:none;
/* other css as you requirment*/
}

Answer 3

This is the normal, straight forward way, using the psuedo class :hover to add a css style to items upon hovering the mouse over them
button.navbar-toggle {
background: #ccc; //a gray background as default
}
button.navbar-toggle:hover {
background: none; //no background when you hover over the button
}