Add text on rollover?

[Schmoopy]

Hi there, does anyone know a way of changing text on rollover, for example, if you have "Hello World", when you rollover it, the text changes to "Hello People".
All I've seen so far is adding borders, or underlining, or making stuff bold. So does anyone know how to do this? Or is it not possible?
Any help is appreciated,

Thanks,

Jack.

[TheJoshMan]

IE won't support this method... but you could use the ":after" pseudo class in css.



<a href="#">Hello <span class="text"></span></a>


then the css...



span.text:after{
content: "World";
}
span.text:hover:after{
content: "People";
}

[Medyman]

Otherwise, you can use JavaScript. I recommend looking into jQuery (http://jquery.com/). Specifically, look into the text() method (http://docs.jquery.com/Attributes/text#val).

[Schmoopy]

Ok, thanks, why is it always IE that just makes everything not possible -.-.

I'll look into the Jquery thing, but all I want to do is add 3 dots to the end of a sentence, like so:-

"continue reading" --> "continue reading..."

Which I guess I could do using border-bottom:dotted, and aligning it right.

But for now I'll just keep it as underline.

Thanks for the info anyway,

Jack.

[Medyman]

Ok, thanks, why is it always IE that just makes everything not possible
Because it's the oldest browser that has to carry a large about of legacy code. IE7 was really a haphazard release my MS. The team behind IE6 was disbanded shortly after it's release (for it's time IE6 was innovative, but that didn't last long). IE7 was just put together to maintain some credibility with standards based browsers like Firefox, Opera and Webkit making innovations (and of course it failed...miserably, IMO). From everything that I've ready, the IE7 team's mission was more backwards focused (not to break non-compliant sites, of which there are many) than forwards (to innovate and excel in standards-based methods).


I'll look into the Jquery thing, but all I want to do is add 3 dots to the end of a sentence
First, for typographical correctness, you should use the ellipsis HTML entity (&hellip;) or the Unicode equivalent.

Second, I'd suggest rethinking if this is necessary to your design. I say add it for the browsers that support it. If IE doesn't support it, so what? It (to me) doesn't seem like a deal breaker. Is it worth the extra overhead of using JavaScript just to add an ellipsis for IE users? Does the ellipsis add context that otherwise wouldn't be there? Just some things to think about...

[TheJoshMan]

not to mention that from a money hungry proprietary standpoint, IE (microsoft) can make more money by being a "nonconformist" when it comes to standards. This is possible because of their wolf in sheep's clothing monopoly over new pc software distribution.

(just my two cents, take it with a grain of salt)

btw, I just made my first post to DD from my new smartphone! woot woot!