CODEWITHSUNDEEP
htmlcsshover
Vini
Vini

Reputation: 2134

Extending the Background color on Hover

I have searched many questions in SO, but none of the answers fit well into my situation.

I am having a col-md-2 where I have a navigation bar. I want to fill the background colour till the border of the `col-md-2' when hovering. I am able to change the color but it doesn't extend till the border.

I have created a sample fiddle.

Just in case the fiddle doesnt work.

<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>
<div class="col-md-10">
    cycdc
</div>

Css 

.col-md-2{
    background-color:red;    
}
.col-md-2>ul>li>a:hover{
    background-color:yellow;
}

Update

I understand that I have to add a display:block in thea tag. But when i apply the same in my code it doesnt really work. I will post the css that i am having.

.col-md-2 .navbar-nav{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav >li{
    text-align: center;   
    display:block;
}
.col-md-2 .navbar-nav>ul>li>a{
    color:#255C89;
    display:block;
}
.col-md-2 .navbar-nav >li>a:hover{
    background-color:#255C89;
    color:white;
}

Html 

<div class="col-md-2">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink("View System Families", "Index", "LsystemFamilies")</li>
        <li>@Html.ActionLink("Add New System Family", "Create", "Lsystemfamilies")</li>
        <li>@Html.ActionLink("View all Systems", "Index", "Lsystems")</li>
    </ul>
</div>

Upvotes: 2

Views: 1070

Answers (4)

z1m.in
z1m.in

Reputation: 1661

http://jsfiddle.net/frtjwqhp/1/

You simply need add display: block to a tag

upd:

According to your code selector is 

.col-md-2 .navbar-nav > li > a
{
    display: block
}

upd2:

.col-md-2 .navbar-nav
{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav>li
{
    text-align: center;   
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a
{
    color:#255C89;
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a:hover
{
    background-color:#255C89;
    color:white;
}

Upvotes: 1

dippas
dippas

Reputation: 60553

you could do this 2 ways:

1st:

hover li instead a

.col-md-2{
    background-color:red;
    
}
.col-md-2>ul>li:hover{
    background-color:yellow;
}
<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>

2nd

setting display:block to a because by default is set do default:inline

.col-md-2 {
  background-color: red;
}
.col-md-2>ul>li a:hover {
  background-color: yellow;
}
a {
  display: block
}
<div class="col-md-2">
  <ul>
    <li><a href="#">dfsdf</a>
    </li>
    <li><a href="#">sdgfdgdfgdf</a>
    </li>
    <li><a href="#">sdfdsfsd</a>
    </li>
  </ul>
</div>

Based on your comment, the solution is the same, check it your updated code:

1st:

hover li instead a

.col-md-2 .navbar-nav {
  background-color: ghostwhite;
  /*remove margin/padding from ul default if not already */
  margin: 0;
  padding: 0;
}
.col-md-2 .navbar-nav li {
  text-align: center;
  display: block;
}
.col-md-2 .navbar-nav>ul>li>a {
  color: #255C89;
  display: block;
}
.col-md-2 .navbar-nav>li>:hover {
  background-color: #255C89;
  color: white;
  display: block;
}
<div class="col-md-2">
  <ul class="navbar-nav">
    <li><a href="#">dfsdf</a>
    </li>
    <li><a href="#">sdgfdgdfgdf</a>
    </li>
    <li><a href="#">sdfdsfsd</a>
    </li>
  </ul>
</div>

2st:

setting display:block to a because by default is set do default:inline

.col-md-2 .navbar-nav {
  background-color: ghostwhite;
  /*remove margin/padding from ul default if not already */
  margin: 0;
  padding: 0;
}
.col-md-2 .navbar-nav li {
  text-align: center;
  display: block;
}
.col-md-2 .navbar-nav>ul>li>a {
  color: #255C89;
  display: block;
}
.col-md-2 .navbar-nav>li>a:hover {
  background-color: #255C89;
  color: white;
  display: block;
}
<div class="col-md-2">
  <ul class="navbar-nav">
    <li><a href="#">dfsdf</a>
    </li>
    <li><a href="#">sdgfdgdfgdf</a>
    </li>
    <li><a href="#">sdfdsfsd</a>
    </li>
  </ul>
</div>

Upvotes: 1

michaelcarwile
michaelcarwile

Reputation: 86

Adding display:block; to the a has the added benefit of making the entire area clickable on hover and will accomplish your goal:

.col-md-2{
    background-color:red;
}
.col-md-2>ul>li>a{
    display:block;
}
.col-md-2>ul>li>a:hover{
    background-color:yellow;
}

Upvotes: 1

tabassum
tabassum

Reputation: 1110

this will also work 

.col-md-2{
    background-color:red;
    
}
.col-md-2>ul>li:hover{
    background-color:yellow;
}
<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>
<div class="col-md-10">
    cycdc
</div>

Upvotes: 1

Related Questions