Grow your CSS skills. Land your dream job.

Apply a background hover to a tag?

  • # June 25, 2011 at 9:36 am

    I am trying to get a background hover effect to work for my headers.

    Here is the code I used:
    a:link { color: #10486b; text-decoration: none;}
    a:visited { color: #10486b; text-decoration: none;}
    a:hover { color: #133340; background-color: #8dd0ea; text-decoration: underline;}
    a:active { color: #0e2731; background-color: #83c1d9; }

    I also tried this and it didn’t work:
    h2 a:hover { color: #133340; background-color: #8dd0ea; text-decoration: underline;}
    h2 a:active { color: #0e2731; background-color: #83c1d9; }

    Everything works for the headers except for the background-color. This seems like it should be fairly simple :/. What am I doing wrong?

    # June 25, 2011 at 10:19 am

    show us all the css / html. my guess is that there is more specific rule for the anchor background

    # June 25, 2011 at 11:03 am

    You can look at the HTML here in the source code, since I can’t post html here: http://www.theavocadogirl.com/

    CSS:
    #container {
    width: 1015px;
    left: 13%;
    position: relative;
    margin: 5px;
    }

    h2 {
    font-family: “Trebuchet MS”, Arial, Verdana, Sans-serif;
    font-size: 15px;
    line-height: 20%;
    }
    #article1
    {
    float: left;
    position: relative;
    width: 320px;
    padding: 7px;
    border-right: 2px solid #4e7e91;
    }

    #article2
    {
    float: left;
    position: relative;
    padding: 7px;
    width: 320px;
    border-right: 2px solid #4e7e91;
    }

    #article3
    {
    float: left;
    position: relative;
    padding: 7px;
    width: 320px;
    }

    body {
    background-color: #ffffff;
    font-family: Arial, “Trebuchet MS”, Verdana, Sans-serif;
    font-size: 13px;
    color: #133340;
    }

    a:link { color: #10486b; text-decoration: none;}
    a:visited { color: #10486b; text-decoration: none;}
    a:hover { color: #133340; background-color: #8dd0ea; text-decoration: underline;}
    a:active { color: #0e2731; background-color: #83c1d9; }

    h2 a:hover { color: #133340; background-color: #8dd0ea; text-decoration: underline;}
    h2 a:active { color: #0e2731; background-color: #83c1d9; }

    a:link img {
    border: 0; text-decoration: none;
    }
    a:visited img {
    border: 0; text-decoration: none;
    }
    a:hover img {
    border: 0; background-color: white; text-decoration: none;
    }
    a:active img {
    border: 0; background-color: white; text-decoration: none;
    }

    # June 25, 2011 at 11:07 am

    Well, I guess this:

    h2 a:hover { color: #133340; background-color: #8dd0ea; text-decoration: underline;}
    h2 a:active { color: #0e2731; background-color: #83c1d9; }

    should be

    a:hover h2 { color: #133340; background-color: #8dd0ea; text-decoration: underline;}
    a:active h2 { color: #0e2731; background-color: #83c1d9; }

    But it doesn’t completely do the job XD. It puts a line through the text instead of completely highlighting it. Getting closer . . .

    # June 25, 2011 at 11:54 am

    a link to a test page is all that is needed – thanks.

    you have 18 errors on that page, but they’re all the same – there’s no end tag for images, just eliminate them.

    You’re wrapping anchor tags around images which is fine, but also around h2s. While it’s perfectly acceptable in html5 some browsers will probably choke on it, and there’s really no reason to do so anyway – I’d move the anchor to inside the h2. This would solve the problem.

    If you want to leave it as is, then you’re on the right path – you need to target the h2 within the anchor. The problem is the that background color is only as high as the line-height, which you’ve set to only 20% of the inline text box (under the h2 ruleset). Simply remove that line-height and address the spacing with the correct properties – margin. Set the h2 margin to zero and the following p top margin to 0.

    # June 25, 2011 at 3:27 pm

    Oh wow, not sure why I coded the images like that! Moving the anchor tag inside the h2 fixed it immediately :D. Thank you for the tips on the margins; I didn’t know I could adjust the margins on text!

    Thank you so much!

    <3

    Laurel

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".