How Do I Do This? :hover

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.


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).

1 Like

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:

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

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;
1 Like

Thanks both for the help!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.