• 0

Change text on hover? css?


Question

13 answers to this question

Recommended Posts

  • 0

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).

&lt;a onmouseover="this.innerHTML = 'TheWorldwide Leader In Sports'" onmouseout="this.innerHTML = this.alt" alt="ESPN.com" href="http://www.espn.com/">ESPN.com</a>

  • 0
  Mathachew said:
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).

&lt;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.

  • 0

&lt;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.

  • 0
  Mathachew said:
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

&lt;style&gt;
.shh, a:hover span { display: none }
a:hover .shh { display: inline }
&lt;/style&gt;
&lt;a href="http://espn.com/">t;span&gt;ESPN.com</span>;
	&lt;span class="shh"&gt;The Worldwide leader in sports&lt;/span&gt;
&lt;/a&gt;

  • 0
  saachi said:
Just to correct Mathachew, CSS can handle this without JS, a quick POC

&lt;style&gt;
.shh, a:hover span { display: none }
a:hover .shh { display: inline }
&lt;/style&gt;
&lt;a href="http://espn.com/">t;span&gt;ESPN.com</span>;
	&lt;span class="shh"&gt;The Worldwide leader in sports&lt;/span&gt;
&lt;/a&gt;

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.

  • 0
  Mathachew said:
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).

&lt;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"; }
&lt;a id="test" href="#"&gt;&lt;/a&gt;

demo page:

&lt;!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&gt;
 &lt;style type="text/css"&gt;
  #test:before {
   content:"Link One";
  }
  #test:hover:before {
   content:"Link Two";
  }
 &lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p&gt;&lt;a id="test" href="#"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

  • 0

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:

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.