CODEWITHSUNDEEP
htmlcss
jacobtohahn
jacobtohahn

Reputation: 135

How do I make my link hover background fill the entire background?

I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my padding elements. How do I fix this?

Here is a Fiddle of my code: https://jsfiddle.net/b8js8zkq/

I have looked at How do I make the hover background color fill the height of the link? and did not find a good answer there, so please don't mark this as a duplicate of that.

Upvotes: 3

Views: 2218

Answers (4)

Ben
Ben

Reputation: 345

I'd recommend changing your css from this

.header a:hover{
  background-color: #f3e5d8;
}

to this

.header li:hover{
  background-color: #f3e5d8;
}

This will make it so any list item within your header class will change its background colour when hovered.

Upvotes: 1

Luminous_Dev
Luminous_Dev

Reputation: 614

jsfiddle update

Old

 .header a:hover {
  background-color: #f3e5d8;
}

New

.header li:hover {
   background-color: #f3e5d8;
}

You want to change the color of the li element rather than just the a tag

Upvotes: 0

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

https://jsfiddle.net/b8js8zkq/1/

Fixed fiddle.

You remove the padding on both <h3> and <li>, and add that same padding to the <a>-tag.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

The problem with your code is, you have margin and padding on both <h3> and <li>. So remove them and add them as padding to the <a> tag. And you are done!

The padding and margin of each 15px constitute 30px of total padding to <a>. That's what I have done below:

.header li {
  border-bottom: 1px solid #888;
  font-size: 20px;
  padding: 0;
}
ul h3 {
  margin: 0;
  padding: 0
}
.header a {
  display: block;
  padding: 30px;
}

Fiddle: https://jsfiddle.net/19r4a4ft/

Upvotes: 2

Related Questions