By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,473 Members | 3,505 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,473 IT Pros & Developers. It's quick & easy.

.class:hover Selector

P: n/a
Hi,

I'm trying out the following:
CSS

.className {
width: 30px;
height: 30px;
border: 1px solid black;
}

.className:hover {
background-color: red;
}

HTML

<div class="className"></div>
I know the :hover pseudo-class only works on anchors in Internet Explorer, but what bothers me is that I can't get it to work in Firefox 1.5 either. On the contrary, a select like "#elementID:hover" does work in Firefox. Is this a bug in Firefox or am I using a wrong CSS syntax? Any possible solutions?

Regards,

Gerry.

Apr 4 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Els
Gerry Vandermaesen wrote:
Hi,

I'm trying out the following: CSS

.className { width: 30px; height: 30px; border: 1px solid black; }

.className:hover { background-color: red; }

HTML

<div class="className"></div> I know the :hover pseudo-class only
works on anchors in Internet Explorer, but what bothers me is that
I can't get it to work in Firefox 1.5 either. On the contrary, a
select like "#elementID:hover" does work in Firefox. Is this a bug
in Firefox or am I using a wrong CSS syntax? Any possible
solutions?


Difficult without seeing your code, but it could well be a case of
specificity. If you'd have #content div:hover{background-color:blue;}
elsewhere in your stylesheet for instance, your .className:hover rule
will only work if you add #content to it, so that it is more specific
than the contradicting rule.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Smokie - For A Few Dollars More
Apr 4 '06 #2

P: n/a
Here's some code that doesnt work like I'd expect it to. The DIV doesnt turn
red when hovering, not in IE nor FF.

<html>
<head>
<style>
.className { width: 30px; height: 30px; border: 1px solid black; }
.className:hover { background-color: red; }
</style>
</head>
<body>
<div class="className"></div>
</body>
</html>

"Els" <el*********@tiscali.nl> wrote in message
news:19*****************************@40tude.net...
Gerry Vandermaesen wrote:
Hi,

I'm trying out the following: CSS

.className { width: 30px; height: 30px; border: 1px solid black; }

.className:hover { background-color: red; }

HTML

<div class="className"></div> I know the :hover pseudo-class only
works on anchors in Internet Explorer, but what bothers me is that
I can't get it to work in Firefox 1.5 either. On the contrary, a
select like "#elementID:hover" does work in Firefox. Is this a bug
in Firefox or am I using a wrong CSS syntax? Any possible
solutions?


Difficult without seeing your code, but it could well be a case of
specificity. If you'd have #content div:hover{background-color:blue;}
elsewhere in your stylesheet for instance, your .className:hover rule
will only work if you add #content to it, so that it is more specific
than the contradicting rule.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Smokie - For A Few Dollars More

Apr 4 '06 #3

P: n/a
Els
Gerry Vandermaesen wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:19*****************************@40tude.net...
Gerry Vandermaesen wrote:
<div class="className"></div> I know the :hover pseudo-class only
works on anchors in Internet Explorer, but what bothers me is that
I can't get it to work in Firefox 1.5 either. On the contrary, a
select like "#elementID:hover" does work in Firefox. Is this a bug
in Firefox or am I using a wrong CSS syntax? Any possible
solutions?


Difficult without seeing your code, but it could well be a case of
specificity. If you'd have #content div:hover{background-color:blue;}
elsewhere in your stylesheet for instance, your .className:hover rule
will only work if you add #content to it, so that it is more specific
than the contradicting rule.


Here's some code that doesnt work like I'd expect it to. The DIV doesnt turn
red when hovering, not in IE nor FF.

<html>

[snip code]

Add this line above your <html>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

(and use a <title>, and add 'type="text/css"' to the <style> tag, but
that's not causing your problem)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Mungo Jerry - Long Legged Women Dressed In Black
Apr 4 '06 #4

P: n/a
Gerry Vandermaesen wrote:

.className:hover { background-color: red; }

<div class="className"></div>
I know the :hover pseudo-class only
works on anchors in Internet Explorer, but what bothers me is that I
can't get it to work in Firefox 1.5 either.


Assuming that's your real code, an empty div has no height, so there's
nothing to see. Browsers aren't required to render empty elements, anyway.

If there is more to it, post a URL, not more code.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 4 '06 #5

P: n/a
Thanks, seems to have solved my problem. Didn't realize the doctype
definition was of that importance.

Apr 5 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.