2 replies [Last post]
Homeboy
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2004-08-17
Posts: 96
Points: 0

I am trying to have a highlight color over a link when ever some one go over it. How do I do that?

If you don't know what I am talking about go to the macromedia.com website and whenever you go over a link there is a blue highlight over the link.

Thanks

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 18 years 51 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

link

You can use CSS to style the a:hover rollover state eg:

<div id="navbar">
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html ">Link 2</a></li>
<li><a href="link3.html ">Link 3 3</a></li>
</ul>
</div>

Then in the CSS (here's one I prepared earlier)...

div#navbar {
    height: 30px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
}
div#navbar ul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar li {
    list-style-type: none;
    display: inline;
}
div#navbar li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar li a:link {
    color: #FFF:
}
div#navbar li a:visited {
    color: #CCC;
}
div#navbar li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3CF;
}
[/code]

PAUL - SkyRocket Design Co
web design sydney northern beaches

brockly
Offline
Regular
Kent England
Last seen: 18 years 16 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

I use this way

a:link {
color : #CCFFFF; 
font-size : 10px; 
font-weight : bold; 
text-decoration : underline; 
} 

a:visited {
color : #CCFFFF; 
font-weight : bold; 
text-decoration : underline; 
} 

a:hover {
color : #000000;
text-decoration : underline; 
background-color : #FFFFCC; 
}
 
a:active {
color : #66ffff; 
text-decoration : underline; 
}