PDA

View Full Version : a:hover not working


MadeCurler
09-23-2009, 01:06 PM
I'm new to this and I'ved styled a navigation bar with:

.style1 {
color: #CCCCCC;
font-weight: bold;}

a.navigation:link {
color: #006;
text-decoration: none;
background-color: #FFF;
display: block;
}
a.navigation:visited {
text-decoration: none;
color: #F60;
background-color: #FFF;
display: block;
}
a.navigation:hover {
text-decoration: none;
color: #006;
background-color: #D0CDFC;
display: block;
}
a.navigation:active {
text-decoration: none;
color: #006;
background-color: #CAE0FB;
display: block;
}

HTML

<div id="container">
<div class="navigation"> <span class="style1">|</span> <a href="index.html">Home</a><br />
<span class="style1">|</span> <a href="what_we_do.html">What we do</a><br />
<span class="style1">|</span> <a href="snacks_rota.html">Snacks Rota</a><br />
<span class="style1">|</span> <a href="games.html">Games</a><br />
<span class="style1">|</span> <span class="style4"> <a href="contact_form.html">Contact</a></span><br />
<span class="style1">|</span><span class="style2"> <a href="autumn_programme.html">Autumn Winter</a><br />
&nbsp;&nbsp;<a href="autumn_programme.html">Programme</a></span> </div>

The website is www.carrbridgetoddlers.co.uk (http://www.carrbridgetoddlers.co.uk)

The navigation pseudo classes don't work in IE?

Am I doing somehtng wrong.

MadeCurler

domedia
09-23-2009, 01:44 PM
'a.navigation' is a selector that will select all links that has the class 'navigation'. You have none of these.

Looking at your markup, you want CSS rules that selects all links that are children of .navigation:
.navigation a:link {}
.navigation a:visited {}
.navigation a:hover {}
.navigation a:active {}

MadeCurler
09-23-2009, 04:41 PM
I understand it now..and my site now works...thanks very much for your prompt reply.

Enthusiastic Pensioner

MadeCurler
09-23-2009, 06:15 PM
Sorry

I thought it was now Ok, but no. I'v changed the CSS code below
as you suggested. It still doesn't show any colours on hover in IE.

.navigation a:hover {
text-decoration: none;
color: #F0D1CF;
width: 85px;
display: block;
}
.navigation a:visited {
text-decoration: none;
color: #8B718A;
width: 85px;
display: block;
}
.navigation a:active {
text-decoration: none;
color: #006;
width: 85px;
display: block;
}
.navigation a:link {
color: #006;
text-decoration: none;
width: 85px;
display: block;
}

HTML

<div class="navigation">
<a href="../index.html"><span class="style1">|</span>Home</a>
<a href="../what_we_do.html"><span class="style1">|</span>What we do</a>
<a href="../snacks_rota.html"><span class="style1">|</span>Snacks Rota</a>
<a href="../games.html"> <span class="style1">|</span>Games</a>
<a href="../contact_form.html"><span class="style1">|</span>Contact</a>
<a href="../autumn_programme.html"><span class="style1">|</span>Autumn Winter &nbsp;Programme</a>
</div>

Corrosive
09-23-2009, 06:29 PM
you've got them in the wrong order. It goes link, visited, hover, active.

MadeCurler
09-23-2009, 08:12 PM
Thanks again, but I've tried that and still doesn't work....CSS now
...I really appreciate your help...see it at www.carrbridgetoddlers.co.uk (http://www.carrbridgetoddlers.co.uk)

.navigation a:link {
color: #006;

}
.navigation a:visited {
color: #F60;
}
.navigation a:hover {
color: #CB9DCC;
}

.navigation a:active {
color: #006;
}

HTML

<div class="navigation">
<span class="style1">|</span> <a href="../index.html">Home</a><br />
<span class="style1">|</span> <a href="../what_we_do.html">What we do</a><br />
<span class="style1">|</span> <a href="../snacks_rota.html">Snacks Rota</a><br />
<span class="style1">|</span> <a href="../games.html">Games</a><br />
<span class="style1">|</span> <a href="../contact_form.html">Contact</a><br />
<span class="style1">|</span> <a href="../autumn_programme.html">Autumn Winter &nbsp;&nbsp;Programme</a><br />
</div>

MadeCurler
09-23-2009, 08:34 PM
I've now got it working this time (really I have!)...but......after visit, the link shows red (as instructed). If I refresh the page the link is still red....I presume that's a function of the browser cache?

domedia
09-23-2009, 09:19 PM
: visited means a link to a page that you've been on already, so it's working like it should.

MadeCurler
09-23-2009, 10:38 PM
Thanks for your reply (and patience). I'm new to all this but loving it when I get somthing to work! Lots to learn.

Regards

Enthusiatic Pensioner