This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > September 2005 > CSS Button Rollover States
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
CSS Button Rollover States
|
|
| Net Image 2005-09-15, 7:19 pm |
| I am using CSS for navigation buttons on my website and one problem I have come
across is the link and hover work fine with the mouse over effect until you
actually click the link. Once the link is clicked I can't get back to a mouse
over effect. Below is my CSS. I want to always have the navigation rollover
from red to gold. If I don't have a visited color then it will be purple. How
can I keep the rollover effect? Thanks in advance.
a.navButtons:Link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
text-align:center;
}
a.navButtons:Hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#b69b52;
text-transform:uppercase;
text-decoration:none;
text-align:center;
}
a.navButtons:Visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
text-transform:uppercase;
text-decoration:none;
text-align:center;
}
| |
| Michael Fesser 2005-09-15, 7:19 pm |
| ..oO(Net Image)
>I am using CSS for navigation buttons on my website and one problem I have come
>across is the link and hover work fine with the mouse over effect until you
>actually click the link. Once the link is clicked I can't get back to a mouse
>over effect.
:link, :visited, :hover, :active
That's the required order.
Additionally your CSS is rather bloated, it doesn't have to be that way.
The following does the same and could be reduced even further (for
example by stripping the 'navButtons' class and using a descendant
selector instead, the 'font' property could be removed as well):
a.navButtons {
font: bold 12px Arial, Helvetica, sans-serif;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
}
a.navButtons:visited {
color: #000;
}
a.navButtons:hover {
color: #B69B52;
}
Learn more about CSS, read about cascading, inheritance and shorthand
properties.
Micha
| |
| Michael Fesser 2005-09-15, 7:19 pm |
| ..oO(Net Image)
>I am using CSS for navigation buttons on my website and one problem I have come
>across is the link and hover work fine with the mouse over effect until you
>actually click the link. Once the link is clicked I can't get back to a mouse
>over effect.
:link, :visited, :hover, :active
That's the required order.
Additionally your CSS is rather bloated, it doesn't have to be that way.
The following does the same and could be reduced even further (for
example by stripping the 'navButtons' class and using a descendant
selector instead, the 'font' property could be removed as well):
a.navButtons {
font: bold 12px Arial, Helvetica, sans-serif;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
}
a.navButtons:visited {
color: #000;
}
a.navButtons:hover {
color: #B69B52;
}
Learn more about CSS, read about cascading, inheritance and shorthand
properties.
Micha
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|