Rich P Rich P - 4 months ago 13
CSS Question

CSS to change color of tab on a Bootstrap Tab Control when hovering over the tab

Below is the html code for a vertically aligned Boostrap tab control - sample (bare bones - this is a working sample). It appears that the default color of a tab when hovering over it is a light gray color (I am guessing from boostrap.min.css). Is there a way I could change the color from light gray to something else in my own css? to like override the default color (if that is what it is) ? What is the css for that?

<html>
<head runat="server">
<title></title>

<link rel="stylesheet prefetch" href="bootstrap.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>

<style type="text/css">
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: red blue red red;
*border-right-color: lime;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div><h3>Tabs - vertical</h3>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li style="background-color:orange;"><a href="#a" data-toggle="tab">One</a></li>
<li style="background-color:orange;" class="active"><a href="#b" data-toggle="tab">Two</a></li>
<li style="background-color:orange;"><a href="#c" data-toggle="tab">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="a"> --A) testing row A</div>
<div class="tab-pane active" id="b"> --B) testing row B</div>
<div class="tab-pane" id="c"> --C) testing row C </div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>

Answer Source

You are looking for background-color:

.tabs-left > .nav > li > a:hover {
   background-color: red;
}