• 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.
  • Posts

    • From a quick Google it seems 6GHz is optional on 802.11be. Ubiquiti has one, Unifi U7 Lite.
    • Disagreed, I feel it’s going somewhere and his role served a purpose - and moreover with maybe what 10 mins of screen time - he had a bit of character development also.
    • This is the Superman film I had been waiting for. The tone was fine, yes a little more “fun” than previous outings but a lot of that came from supporting characters. Krypto was well handled, and somehow managed to not be an annoying distraction and actually a valid part of the story. Hoult was GREAT as Luthor. Genuinely so happy that this wasn’t crap. I personally enjoyed Superman Returns, despite its flaws (tried too much to hide behind the older movies, had no real fight to Superman). I enjoyed the Man Of Steel movies despite their flaws (totally that is NOT Superman). But this - this is the film I had wanted. In the UK we are far more reserved in cinemas than Americans. It’s rare that there is the whooping and hollering that we have seen from videos of US theatres, so when I say that the audience clapped at the end of this - it’s quite a big deal. As for all this “Superman has gone woke” BS - he is freaking Superman and if at any point in that movie you found yourself pooh-pooing his actions, you are just - you’re aligning your thinking with the problems and not the solutions. I adore how the movie addressed the modern world through thinly veiled allegory (Israel, online bots, perceptions of people, how they change on a dime) - that is maybe one of the greatest strengths of  comics, they rarely pull punches with that sort of thing, and look, THIS IS SUPERMAN, he’s meant to be the global boyscout and that is a strength and where he falls down sometimes, that’s just who he is and who he is meant to be. I also am glad there was no reference to the worldwide joke that is “Truth, Justice and the American way”. I can understand the comment suggesting this film was a little too “fun” or “whimsical”, but I’d urge a rewatch of the Donner Superman. It was very much a flawed masterpiece and its subsequent sequel had too many jokes that didn’t land. While there was a lot of James Gunn in this movie, I feel he pulled it back significantly, it wasn’t Guardians and moreover a lot of the fun came from supporting roles.
    • People do it everywhere. Should be legal to be allowed to bitch slap people who put their phone on speaker in public places
  • Recent Achievements

    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      504
    2. 2
      ATLien_0
      207
    3. 3
      Michael Scrip
      205
    4. 4
      Xenon
      141
    5. 5
      +FloatingFatMan
      115
  • Tell a friend

    Love Neowin? Tell a friend!