Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts

    link visited color problem in FF

    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

    Code:
    <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>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.
    Code:
    <button style="background:Yellow" onmouseover="this.style.background='Red';" onmouseout="this.style.background='Aqua';">Mogrify me</button>

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Yes, but I want to keep the <a> tag link visited behaviour.

    The only way I can get it to do what I want is to name the hrefs differently.

    (I just found this out by trial and error this afternoon):

    <a href="#1" ...blah blah blah...>

    <a href="#2" ...blah blah blah...> etc.

    I guess there's a logic there somewhere. Perhaps it's a case of IE being illogical, but I prefer its approach in this case.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •