Results 1 to 6 of 6

Thread: Add text on rollover?

  1. #1
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default Add text on rollover?

    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.

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

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

    Code:
    <a href="#">Hello <span class="text"></span></a>
    then the css...

    Code:
    span.text:after{
    content: "World";
    }
    span.text:hover:after{
    content: "People";
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Otherwise, you can use JavaScript. I recommend looking into jQuery. Specifically, look into the text() method.

  4. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

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

  6. #6
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    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!
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

Bookmarks

Posting Permissions

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