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.

Quote:

---

Originally Posted by ancient

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'));
});

---

Quote:

---

Originally Posted by paul_wilkins

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 "fixed:positioned" 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

Quote:

---

Originally Posted by ancient

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.

Quote:

---

Originally Posted by paul_wilkins

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/

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

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.