SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Append on hover

  1. #1
    SitePoint Member ancient's Avatar
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Append on hover

    I have this css hack that only works in FF,... it doesn't work in chrome. I am trying to duplicate the same effect using jQuery.

    a.open:hover:after {
    content: "......";
    }

    I am basically appending "..." to the link text on hover.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ancient View Post
    I have this css hack that only works in FF,... it doesn't work in chrome. I am trying to duplicate the same effect using jQuery.

    a.open:hover:after {
    content: "......";
    }

    I am basically appending "..." to the link text on hover.
    That would be something like this:

    Code javascript:
    $('a.open').on('hover', function () {
        this.data('html') = this.html();
        this.append(' additional text to the link');
    }, function () {
        this.html(this.data('html'));
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member ancient's Avatar
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That would be something like this:

    Code javascript:
    $('a.open').on('hover', function () {
        this.data('html') = this.html();
        this.append(' additional text to the link');
    }, function () {
        this.html(this.data('html'));
    });


    Hi Paul, thank you for responding... That didn't seem to work for me. But upon further examination, the other links on the page works in chrome with my original CSS implementation. The only difference is that the link that's not working is sitting within a "fixedositioned" div element at the bottom of my page. This is the address to the page is : " www.thesoulpoet.com ".

    But I am going to keep working at it...

    Thanks again

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ancient View Post
    Hi Paul, thank you for responding... That didn't seem to work for me.
    That's due to the code being intended to be pseudo-code, which shows the type of direction that you need to take.

    When I get off of this mobile device, I'll put together a simple test that provides working code to demonstrate the technique in action.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That's due to the code being intended to be pseudo-code, which shows the type of direction that you need to take.

    When I get off of this mobile device, I'll put together a simple test that provides working code to demonstrate the technique in action.
    Here's some simple test code that demonstrates that technique.
    http://jsfiddle.net/pmw57/bEgpQ/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member ancient's Avatar
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    I got the code you put on jsfiddle... I kind of got side tracked. I will implement the code later on today, I will let you know the results. Thanks again for your help.

    Much appreciation,

    AT

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Not sure what's going on in your CSS, but when I add display:inline; (or display:inline-block; or display:block; , so I guess any display value?) to the a.open link the "..." appears just fine when hovering on your sample page.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •