CSS :Background color on hover State

Question

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 ?

King King · Accepted Answer · 2014-06-21 14:36:23Z

1

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.

answered Jun 21, 2014 at 14:36

King King

63.5k16 gold badges118 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2014-06-21 14:39:38Z

0

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;
}

edited Jun 21, 2014 at 14:39

answered Jun 21, 2014 at 14:19

user3728283

1 Comment

Sikander Over a year ago

that is not working as padding is applied to its parent container

Collectives™ on Stack Overflow

CSS :Background color on hover State

2 Answers 2

Demo.

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related