Question

Given a p element like so:
<p>Something</p> I want to, when the user mouses over it, we have, instead <p><a href="blabla.org">go here</a></p>

After hovering if the mouse leaves the p area, return to the previous:
<p>Something</p> state.

Can I have a simple example of something like this?

Thanks a lot,
MEM

Answer 1

Or a simple modification of Ken Redler’s original that uses .data() to keep track of things:

$('p#someID').hover( 
    function() {
        var $this = $(this);
        $this.data('orig', $this.html()).html('<a href="blabla.org">go here</a>');
    },
    function() {
        var $this = $(this);
        $this.html($this.data('orig')).removeData('orig');
    }
);

http://www.jsfiddle.net/ambiguous/FhET2/1/