a:hover not working in Firefox.

Question

Pim 0 Junior Poster

18 Years Ago

I'm using the following code:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; /*lagere waardes zijn doorzichtig*/
margin-left: 240px; /*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

/*Code voor het menu links.*/
ul
{
float: left; /*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none; /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; /*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
cursor: default;
}
#links a:active
{
text-decoration: none;
color:#66CC33;
}
#links a:visited
{
text-decoration: none;
color:#66CC33;
}

The problem is that the links are supposed to light up red when the use puts his mouse over them. This only works in IE for some reason. Anybody knows what's causing this?

Thank You,

Pim

user-interface web-design

5 Contributors
10 Replies
302 Views
3 Years Discussion Span
Latest Post 14 Years Ago Latest Post by Otters10

Dani AI

Generated 9 Months Ago

A few focused notes that explain the behavior seen here and give a short checklist to stop a:hover from "disappearing" in Firefox.

First, common root causes (seen in 's thread): invalid HTML or a stray closing tag can break layout and make other elements sit on top of the links (so mouse events never reach them). In the posted markup there is an extra </div> after the .transbox block and a misspelled CSS property (heigth), both of which should be fixed. was right to suggest more specific selectors like #links ul li a — clearer specificity helps avoid accidental overrides.

The pseudo-class cascade also matters: declare link states in the LVHA order (link, visited, hover, active) so :hover isn’t accidentally overridden by a later :visited rule:

#links a:link    { /* base link styles */ }
#links a:visited { /* visited styles */ }
#links a:hover   { /* hover styles — put this after visited */ }
#links a:active  { /* active/focus styles */ }

Quick troubleshooting checklist (do these in order):

Validate HTML and fix the extra </div> and CSS typos like heigth → height.
Check for overlap: a positioned element (like .transbox) can cover the menu. Use Firefox Inspector and force the :hover state or add a temporary background to see overlays. If overlapping is the issue, bring the menu forward with position + z-index.
Remove cursor: default from the anchors (it hides the pointer cue); use the browser default or cursor: pointer if appropriate.
Avoid mixing float with position: fixed; for a fixed sidebar use position: fixed; left: 20px; instead of float.
Ensure links are actual links (e.g. href="#" or real URLs) or use proper semantic controls for non-navigation actions.

What helped here was simplifying the rules to avoid conflicting declarations (as reported) and fixing the HTML/CSS errors. If :hover still seems inactive after those steps, use the Inspector to see which rule is winning in the computed styles — that will point to the offending selector.

All 10 Replies

Dsiembab 5 Junior Poster

18 Years Ago

I'm using the following code:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; /*lagere waardes zijn doorzichtig*/
margin-left: 240px; /*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

/*Code voor het menu links.*/
ul
{
float: left; /*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none; /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; /*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
cursor: default;
}
#links a:active
{
text-decoration: none;
color:#66CC33;
}
#links a:visited
{
text-decoration: none;
color:#66CC33;
}

if you are using the opacity attribute at 1.0 why even have it? Is this for a widget? trim your #links a:hover a:active and a:visited for they will inherit the values from #links a just leave the color. You have links as an id so I am thinking you have you would have to set the

<div id="links"><a href="">whatever</a><a href="">whatever</a><a href="">whatever</a></div>

right? Or are they in a list in that case you would want li a, li a:hover, etc.., Where are these anchors? #links a:active, #links a:hover {color:#66CC33;} please show the html or php markup.

Dsiembab 5 Junior Poster

18 Years Ago

I'm not very familiar with CSS yet, so I see that my code isn't optimal.
Now I've just found, it doesn't work in IE either.
The opacity is 1.0 because I don't know whether I like it or not. I might change the value later, therefore it is 1.0 now.
The HTML is:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://opacity.atspace.com/style.css"/> 
</head>
<body>
<div id="links">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</div>
<div class="transbox">
<p>
Text goes here.
</p>
</div>
</div>
</body>
</html>

#links ul li a{
attributes : values;
}
#links ul li a:hover{
attributes : values;
}
#links ul li a:active{
attributes : values;
}
#links ul li a:visited{
attributes : values;
}
try this out. Of course changing the attributes and values. I started out the same way it definately takes time and practice good luck here is a good sight for opacity http://www.mandarindesign.com/opacitycolor.html

Dsiembab 5 Junior Poster

18 Years Ago

in your <a href=""></a> put a # intbetween the quotations

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Pim 0 Junior Poster · Answer 1 · 2008-02-23T01:26:47+00:00

I'm not very familiar with CSS yet, so I see that my code isn't optimal.

Now I've just found, it doesn't work in IE either.

The opacity is 1.0 because I don't know whether I like it or not. I might change the value later, therefore it is 1.0 now.

The HTML is:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://opacity.atspace.com/style.css"/> 
</head>
<body>
<div id="links">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</div>
<div class="transbox">
<p>
Text goes here.
</p>
</div>
</div>
</body>
</html>

Pim 0 Junior Poster · Answer 2 · 2008-02-23T01:39:44+00:00

Would you mind explaining why this will fix it, and what it does? Because it doesn't work.

Pim

Pim 0 Junior Poster · Answer 3 · 2008-02-23T02:06:43+00:00

Well thanks for your help!
I found the following to solve my problem (for anyone who might have the same problem):
CSS:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; 			/*lagere waardes zijn doorzichtig*/
margin-left: 240px; 		/*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

				/*Code voor het menu links.*/
ul
{
float: left; 			/*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none;		 /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; 		/*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
}

HTML:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://opacity.atspace.com/style.css"/> 
</head>
<body>
<div id="links">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</div>
<div class="transbox">
<p>
Text goes here.
</p>
</div>
</div>
</body>
</html>

Thanks again.

Dsiembab 5 Junior Poster · Answer 4 · 2008-02-23T02:18:52+00:00

Dsiembab 5 Junior Poster

18 Years Ago

You're on your way

jl02 0 Newbie Poster · Answer 5 · 2009-12-16T03:36:35+00:00

I'm using the following code:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; /*lagere waardes zijn doorzichtig*/
margin-left: 240px; /*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

/*Code voor het menu links.*/
ul
{
float: left; /*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none; /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; /*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
cursor: default;
}
#links a:active
{
text-decoration: none;
color:#66CC33;
}
#links a:visited
{
text-decoration: none;
color:#66CC33;
}

The problem is that the links are supposed to light up red when the use puts his mouse over them. This only works in IE for some reason. Anybody knows what's causing this?

Thank You,

Pim

I think you should check the order of the styles, it has to look something like this:

link{
//here is your style
}
link a:visited{
//here is your style
}
link a:hover{
//here is your style
}
and at the end goes
link a:active{
//here is your style
}
so the order should be: link, visited, hover, and active.
Try to do this and I hope it could work.

pronojit 0 Newbie Poster · Answer 6 · 2011-05-23T22:15:46+00:00

I had the same issue with FF, and finally changing the order to link, visited, hover, and active, fixed the issue.

~ Thanks

Otters10 0 Newbie Poster · Answer 7 · 2012-01-13T22:33:38+00:00

I was having trouble with my link states and after changing the order to link, visited, hover, it worked! Thanks so much for posting!

a:hover not working in Firefox.

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers