How Do I Do This? :hover

[Nuttsy]

How do I make the background colour fill the box on hover, instead of half of it shown in the picture?

I’m sure there’s a really simple solution but I haven’t figured it out.

Thanks

[bbsmooth]

We would need to see all of your code (HTML and CSS) in order to know exactly what the issue is but I’m guessing it has something to do with a top/bottom margin or padding. And it would be best if you didn’t post pictures of your code but instead posted a link to your project or at least paste the code itself into the discussion (make sure to wrap it in triple backticks).

[raven666]

That happens because the padding on h2 tag. You can fix it by using :hover on h2 tag. But I suggest you that you re-think that structure is not good for Search engines.

If you’re trying to show a list of links, probably the best should use an unordered list:

<ul>
    <li><a href="#your-link"> Your Link</li>
</ul>

or just the anchors without the list. Then you can style the anchors with CSS. Remember heading tags are for headings not to make the text bigger:

a {
    font-size: 30px; /* or whatever you want */
}

About the hover issue, treat the nested html tags like boxes inside boxes. for example if you have an anchor inside a list items which also has some padding, and you want to change it’s background and color on hover you need selectors like these:

li {
    padding: 1em;
}
/*  change background of container element*/
li:hover {
    background-color: red;
}
/* also change font color, use any of thes: li:hover > a or a:hover*/
li:hover > a {
    color: black;
]

[Nuttsy]

Thanks both for the help!