link visited color problem in FF [Archive]

tpeck

11-10-2010, 02:31 AM

I have three links on a page and each has a tooltip which displays and disappears onmouseover and onmouseout respectively.

In IE it performs as I expect when you click on any of the links. Nothing should happen (yeah, I know, but this is a cutdown version of the page with other links that DO go somewhere...).

The thing is that in FF (and Chrome), clicking on a link makes ALL the page links turn to the visited color. I only require the clicked link to change color.

Is there a good reason why I have messed up?

I don't think the tooltips themselves are responsible.

Here is a quick demo page: http://aapress.com.au/demo/links/links.html

<html>
<head>
<title>Link demo</title>
<script src="../../js/overlib.js" language="javascript1.2"></script>
<style>
body{
margin:10;
}
.hand{cursor: hand; cursor: pointer;}
.text2{
font-family : Arial;
font-size : 13px;
color : #000000;
text-decoration: none;
}

a:link {
color: #EB7A14;
font-weight: bold;
text-decoration: none;
font-family: Arial, Verdana, Helvetica;
}
a:visited {
color: #006699;
font-weight: bold;
text-decoration: none;
font-family: Arial, Verdana, Helvetica;
}
a:hover {
color: #C79129;
font-weight: bold;
}
</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td width="40%" height="25">
<p class="text2">
<a href="#" onmouseover="this.style.textDecoration='underline'; return overlib('This is a tooltip.', WIDTH, 175, HEIGHT, 10, LEFT, ABOVE, SNAPX, 5, SNAPY, 5)" onmouseout="this.style.textDecoration='none';return nd()">
Link 1</a></td>
</tr>
<tr>
<td width="40%" height="25">
<p class="text2">
<a href="#" onmouseover="this.style.textDecoration='underline'; return overlib('This is a tooltip.', WIDTH, 175, HEIGHT, 10, LEFT, ABOVE, SNAPX, 5, SNAPY, 5)" onmouseout="this.style.textDecoration='none';return nd()">
Link 2</a></td>
</tr>
<tr>
<td width="40%" height="25">
<p class="text2">
<a href="#" onmouseover="this.style.textDecoration='underline'; return overlib('This is a tooltip.', WIDTH, 175, HEIGHT, 10, LEFT, ABOVE, SNAPX, 5, SNAPY, 5)" onmouseout="this.style.textDecoration='none';return nd()">
Link 3</a></td>
</tr>
</table>

</body>

</html>

DrDOS

11-10-2010, 03:52 AM

On mouseover and mouseout don't require an 'a' tag to work, you could just make those spans or divs. Because they are links, and all go to the same 'location', namely #, the top of the page, that is expected behavior. Here's a code I posted earlier today that changes the color of a button, and doesn't depend on an anchor tag.
<button style="background:Yellow" onmouseover="this.style.background='Red';" onmouseout="this.style.background='Aqua';">Mogrify me</button>