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 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text change on hover

    I have been trying to figure out a way to change text of a link as you hover over it.

    It is just a normal link, <a href="blah">blah</a>

    Is there a way I can use onmouseover to change the link text?

    Thanks,
    Josh

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Careful with this as it might confuse users.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Link Text Change</title>
    <style type="text/css">
    a.textchange span.text1 {
    display:inline;
    }
    a.textchange:hover span.text1 {
    display:none;
    }
    a.textchange span.text2 {
    display:none;
    }
    a.textchange:hover span.text2 {
    display:inline;
    }
    </style>
    </head>
    
    <body>
    <a href="#" class="textchange"><span class="text1">This is text</span><span class="text2">This is different text</span></a>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This was a method suggested to me be Aero some time ago.
    It might not quite be what you want, but it is easy to check.
    It is in use in my url

    http://exitfegs.co.uk/Sources.html

    Frank

    Code:
    #links ul a:hover {font-size : 170&#37;; font-family:sans-serif;color:#0ff;}
    
    #links2 ul a:hover {font-size : 170%; font-family:sans-serif; color:#0ff;}
    
    #links3 ul a:hover {font-size : 170%; font-family:sans-serif; color:#0ff;}
    #links {
      clear: left;
      font: 8.5px "arial", non-serif;
      font-weight: bold;
      margin-top: 10px;
    }
    
    #links ul {
      padding-left: 16px;
      margin-left: 16px;
      color: #fff;
      
      width: 270px;
    }
    
    #links ul a {
      color:#fff;
      font-size: 1.4em;
      font-weight:bolder;
      text-decoration: none;
    }
    
    #links ul a:hover {
      text-decoration: underline;
    }
    
    #links2 {
      clear: left;
      font: 8.5px "arial", non-serif;
      font-weight:bold;
      margin-top: 10px;
    }
    
    #links2 ul {
      padding-left: 16px;
      margin-left: 16px;
      color: #fff;
      font-weight:normal;
      width: 270px;
    }
    
    #links2 ul a {
      color: #fff;
      font-size: 1.4em;
      font-weight:bolder;
      text-decoration: none;
    }
    
    #links2 ul a:hover {
      text-decoration: underline;
    }
    Last edited by effpeetee; 12-22-2007 at 02:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    For the sake of accessibility/usability I’d rather suggest you use (unobtrusive) JavaScript which will just fall back to the default text if JS is disabled. Something like this (very simple example, can be improved):

    Code:
    <a id="link" href="">Hello World!</a>
    Code:
    var b=document.getElementById('link').firstChild;
    b.parentNode.onmouseover=function() {
    	b.nodeValue='This link has been modified through DOM.';
    }
    b.parentNode.onmouseout=function(){b.nodeValue='Hello World';}


  •  

    Posting Permissions

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