473,395 Members | 1,931 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

.class:hover Selector

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
5 15767
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
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
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
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
Thanks, seems to have solved my problem. Didn't realize the doctype
definition was of that importance.

Apr 5 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's...
5
by: toylet | last post by:
Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...
2
by: tagbert | last post by:
I'm trying to localize the setting of colors on a series of webpages by defining color palettes that will be used for various page areas. I've defined some palette classes like .clrLt, .clrMd,...
16
by: Stoic | last post by:
Hi, I'm relatively new to CSS. I'm trying to get all the urls in a group of text bracketed by <p></p> tags to be underlined and everywhere else to NOT be underlined. As of now my code is like...
24
by: Fred Lock | last post by:
Hello, I have a page with a usual mouseover link highlight effect eg.: a:hover {color: #ff0000; text-decoration: none;} I also have some anchor links such as: <a...
3
by: Vear | last post by:
Hi, I'm looking to change the cssclass on a hyperlink with the onmouseover. I've tried the 3 syntax's below but to no success. Can someone point me in the right direction. Thanks ...
25
by: toffee | last post by:
Hi all, apologies if this seems like a pretty basic question - but can an element have more than one class? if so, how do you set them ? and how does the browser give priority to a class over...
12
by: WaterWalk | last post by:
Hello. I am rather confused by the type of a pointer to class data member. Many c++ texts say that pointer to data member has a special syntax. For example the following class: class MyClass {...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.