SICKZ Posted July 27, 2007 Share Posted July 27, 2007 How would I change what a link says when I hover over it? Ex. Link is Espn.com. When someone hovers over it the text changes to "The Worldwide Leader In Sports". I am not talking about alt text. Link to comment Share on other sites More sharing options...
0 Mathachew Veteran Posted July 27, 2007 Veteran Share Posted July 27, 2007 To change text, you need to use JavaScript as CSS will only change the appearance of an element (such as changing the text from red to blue when hovering). <a onmouseover="this.innerHTML = 'TheWorldwide Leader In Sports'" onmouseout="this.innerHTML = this.alt" alt="ESPN.com" href="http://www.espn.com/">ESPN.com</a> Link to comment Share on other sites More sharing options...
0 rguy84 Posted July 27, 2007 Share Posted July 27, 2007 that is awesome Link to comment Share on other sites More sharing options...
0 SICKZ Posted July 27, 2007 Author Share Posted July 27, 2007 To change text, you need to use JavaScript as CSS will only change the appearance of an element (such as changing the text from red to blue when hovering). <a onmouseover="this.innerHTML = 'TheWorldwide Leader In Sports'" onmouseout="this.innerHTML = this.alt" alt="ESPN.com" href="http://www.espn.com/">ESPN.com</a> Thanks, exactly what I was looking for, but on the mouseout the link comes back to undefined instead of ESPN.com. Although if I switched this.alt to 'ESPN' it worked. Link to comment Share on other sites More sharing options...
0 rguy84 Posted July 27, 2007 Share Posted July 27, 2007 Just a quick guess: your alt has to be the same as your starting txt Link to comment Share on other sites More sharing options...
0 SICKZ Posted July 28, 2007 Author Share Posted July 28, 2007 Just a quick guess: your alt has to be the same as your starting txt Nah it didn't work. I copied the code exactly. Link to comment Share on other sites More sharing options...
0 Mathachew Veteran Posted July 28, 2007 Veteran Share Posted July 28, 2007 Wow, it works in IE but not FF... I'll see why. Anyways, I set the alt text to ESPN.com because your original text was ESPN.com, it had no bearing on whether the script would work or not. More later... Link to comment Share on other sites More sharing options...
0 Mathachew Veteran Posted July 28, 2007 Veteran Share Posted July 28, 2007 <a onmouseover="this.innerHTML = 'The Worldwide Leader In Sports'" onmouseout="this.innerHTML = this.getAttribute('alt')" alt="ESPN.com" href="http://www.espn.com/">ESPN.com</a> This works in FF. The only difference (besides the onmouseout type of "TheWorldwide") is this.getAttribute(). Works in IE6 too. Opera is being retarded about this and will swap the text but will not swap back. It also ignores the fact href has been set. Silly thing. Link to comment Share on other sites More sharing options...
0 Marcel T Posted July 28, 2007 Share Posted July 28, 2007 To change text, you need to use JavaScript as CSS will only change the appearance of an element (such as changing the text from red to blue when hovering). Just to correct Mathachew, CSS can handle this without JS, a quick POC <style> .shh, a:hover span { display: none } a:hover .shh { display: inline } </style> <a href="http://espn.com/"> <span>ESPN.com</span> <span class="shh">The Worldwide leader in sports</span> </a> Link to comment Share on other sites More sharing options...
0 SICKZ Posted July 28, 2007 Author Share Posted July 28, 2007 Just to correct Mathachew, CSS can handle this without JS, a quick POC <style> .shh, a:hover span { display: none } a:hover .shh { display: inline } </style> <a href="http://espn.com/"> <span>ESPN.com</span> <span class="shh">The Worldwide leader in sports</span> </a> Thank you! The first code was what I was looking for as well, but not totally. It was for myspace and it filtered the js so this is perfect. I got it going, but I can't get it to align left on hover. It's in a td that is aligned right. Link to comment Share on other sites More sharing options...
0 primexx Posted July 29, 2007 Share Posted July 29, 2007 To change text, you need to use JavaScript as CSS will only change the appearance of an element (such as changing the text from red to blue when hovering). <a onmouseover="this.innerHTML = 'TheWorldwide Leader In Sports'" onmouseout="this.innerHTML = this.alt" alt="ESPN.com" href="http://www.espn.com/">ESPN.com</a> no you don't. #test:before { content:"Link One"; } #test:hover:before { content:"Link Two"; } <a id="test" href="#"></a> demo page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #test:before { content:"Link One"; } #test:hover:before { content:"Link Two"; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <p><a id="test" href="#"></a></p> </body> </html> Link to comment Share on other sites More sharing options...
0 Marcel T Posted July 29, 2007 Share Posted July 29, 2007 Primex: Easy but wont work 90% of the time, aye ;) My version is more semantically correct also as it retains the content in context. Link to comment Share on other sites More sharing options...
0 primexx Posted July 29, 2007 Share Posted July 29, 2007 My version is more semantically correct also as it retains the content in context. Yea I forgot about that. Link to comment Share on other sites More sharing options...
0 Mathachew Veteran Posted July 29, 2007 Veteran Share Posted July 29, 2007 After I put that, I was like, "Dude... you can use CSS, but you're trying to help someone and you have to quit slackin" so I didn't bother. You are correct, I was wrong :D saachi's version is what I saw (mentally) when I corrected myself, but I just love coding in JS :blush: Link to comment Share on other sites More sharing options...
Question
SICKZ
How would I change what a link says when I hover over it?
Ex.
Link is Espn.com.
When someone hovers over it the text changes to "The Worldwide Leader In Sports". I am not talking about alt text.
Link to comment
Share on other sites
13 answers to this question
Recommended Posts