By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,745 Members | 1,873 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,745 IT Pros & Developers. It's quick & easy.

Is it possible to "deactivate" the .visited state on a link?

Marty1963
P: 4
I was 'playing' with rollover buttons in CSS, using an image background. Works beautifully ... until you click on the button. The 'visited' state stops the rollover effect. Can someone, with more experience than I have, suggest a solution?

I'm including my code below:

-------------------------------------------------------------

<style type="text/css" media="screen">
<!--

.rolloverbutton, a.rolloverbutton:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration:none;
font-weight: bold;
color: #FFFFFF;
line-height:30px;
background-image: url(graphic_02.gif);
background-repeat: no-repeat;
text-indent: 27px;
height: 29px;
width: 185px;
}

a.rolloverbutton:hover {
background-image: url(graphic_02-over.gif);
}

-->
</style>

<table width="185" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><a href="index.php" class="rolloverbutton">Home</a></td>
</tr>
<tr>
<td><a href="news.php" class="rolloverbutton">News</a></td>
</tr>
<tr>
<td><a href="search.php" class="rolloverbutton">Search</a></td>
</tr>
</table>

Thanks in advance!
~Martin
Sep 27 '06 #1
Share this Question
Share on Google+
4 Replies


toxicpaint
P: 58
Don't the links have a background image to begin with?

What's the URL for the site?
Sep 28 '06 #2

Marty1963
P: 4
Thank you for your help. You can find my test link at: http://www.kismedia.com/CSSTest/index.php . It's not for any specific site. I'm just trying to get a better understanding of CSS.

I managed to fix it a bit yesterday by taking the classes off the links and surround the whole thing with the sidemenu class, (see below) That fixed the BKG image rollover, however the text on the button still has the standard link default blue, purple and underline. Is there a way to override that too, or can you embed that within a style? The active text should be white and the rollover should be dark blue/black no text decoration on either.

Thanks again ~ Martin
--------------------------------------------------------

<style type="text/css" media="screen">
<!--

.SideMenu{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration:none;
font-weight: bold;
color: #FFFFFF;
line-height:30px;
}

.SideMenu a:link, .SideMenu a:visited, .SideMenu a:active {
background-image: url(images/graphic_02.gif);
background-repeat: no-repeat;
text-indent: 27px;
height: 29px;
width: 185px;
display:block;
}

.SideMenu a:hover {
color: #061F4B;
background-image: url(images/graphic_02-over.gif);
background-repeat: no-repeat;
text-indent: 27px;
height: 29px;
width: 185px;
}

-->
</style>

<div class="SideMenu">
<a href="index.php">Home</a>
<a href="news.php">News</a>
<a href="search.php">Search</a>
</div>
Sep 28 '06 #3

Banfa
Expert Mod 5K+
P: 8,916
add the color style to

.SideMenu a:link, .SideMenu a:visited, .SideMenu a:active {
...
color: #cc3;
}
Sep 29 '06 #4

Marty1963
P: 4
That fixed it! As usual, It's always the simplest solution. Thanks to everyone for your help.

~Martin
Sep 29 '06 #5

Post your reply

Sign in to post your reply or Sign up for a free account.