/    Sign up×
Community /Pin to ProfileBookmark

background hover states

Copy linkTweet thisAlerts:
Jan 09.2006

Weird. I did this already on another site and now it doesn’t want to work for me.

I am doing a simple swap of BG images.

[INDENT].nav1 {
background-image: url(/images/butt_clientlist.gif);
}

.nav1:hover {
background-image: url(/images/butt_clientlist_on.gif);
}[/INDENT]

This doesn’t work in IE

When I change the hover state to:

[INDENT].nav1 a:hover {
background-image: url(/images/butt_clientlist_on.gif);
}[/INDENT]

it works in IE but it doesn’t work in FF or NS. I get this weird hover that comes up 5 – 10 px too low.

What am I doing wrong?

The class is set in a TD tag (bad I know).

Wassup?

Thanks all.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@terrawolfJan 09.2006 — Internet Explorer doesn't recognise hover states on elements unless they're links... so that's why your first lot of code doesn't work in IE...

But for the second one, check the size of your cell and if it's padded out. Also check where the link is sitting in relation to the cell - is it, for example, in a paragraph tag.

If you have code like yours, then you have to make certain that the link sits exactly in the given cell.

But, why don't you just say:

.nav1 a:link, .nav1 a:active, .nav1 a:visited {

background-image: url(/images/butt_clientlist.gif);

}

.nav1 a:hover {

background-image: url(/images/butt_clientlist_on.gif);

}

and style your link instead? That way you don't have to worry about the positioning of different elements to get it right.
Copy linkTweet thisAlerts:
@s1deusauthorJan 09.2006 — this isn't working. When I use the code you wrote, in FF and NS the off state and the hover state are too low by like 5 - 10 px
Copy linkTweet thisAlerts:
@s1deusauthorJan 09.2006 — NM - I got it to work. Thanks
×

Success!

Help @s1deus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...