Apply a background hover to a tag?

[LaurelBrittany]

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?

[wolfcry911]

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

[LaurelBrittany]

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

[LaurelBrittany]

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

[wolfcry911]

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.

[LaurelBrittany]

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

[Author]

Posts