CODEWITHSUNDEEP
htmlcss
Sikander
Sikander

Reputation: 2835

CSS :Background color on hover State

i am having left navigation in my web page See the attached pic to get better idea of what i have in design

enter image description here

as shown in pic i have 15px padding on both sides of navigation but problem is that when i hover over any of element in navigation its background color should be set to dark grey to the full width means 15 px padding on both sides must be eliminated on hover state and background color

i really cant get how to solve this problem on hover state i can add this 

.nav > li > a:hover { background-color: #f18c2e;
  }

but how do i show it full width background color as per given Pic ?

Upvotes: 0

Views: 2952

Answers (2)

user3728283
user3728283

Reputation:

Try something like this: http://jsbin.com/vebopu/2/

Considering the following CSS:

/* Your 15px padding */
.nav > li {
  padding: 15px;
}

/* Where you set the initial stuff */
.nav > li > a { 
  background-color: #111; 
  color: #fff;
  display:inline-block;
}

/* You want to remove the padding on li hover */
.nav > li:hover {
  padding: 0;
}

/* But you still want the resulting size to keep the padding */
.nav > li:hover a {
  background-color: #f00;
  padding: 15px;
}

Upvotes: 0

King King
King King

Reputation: 63327

You can set the box-shadow to cover the left and right side (15px offset):

nav li:hover {
  background:gray;
  cursor:default;
  box-shadow: 15px 0 0 gray, -15px 0 0 gray;
}

Demo.

Upvotes: 1

Related Questions