JQuery mouseenter / leave

Question

I have this code in html:

<div class="sub-status"> <p class="subscribed"><i class="icon-check"></i> Subscribed</p> </div> 

On hover, I want this to be changed to:

 <div class="sub-status"> <p class="unsubscribe"><i>X</i> Unsubscribe</p> </div> 

And I have this code in jQuery:

 $(document).ready(function() { $('.sub-status').mouseenter(function() { $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); }); $('.sub-status').mouseleave(function() { $('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); }); }); 

The first function works fine. When I click on this div, it changes to what I want, but the mouse does not work. I want that when I pulled my mouse out of this div, its data will return as before. I can't get this to work. Any help would be appreciated.

Thanks.

Answer 1

Try this here. Working demo: http://jsfiddle.net/XrYj4/3/

 $(document).ready(function() { $('.sub-status').on("mouseenter", function() { $(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe"); }).on("mouseleave", function() { $(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed"); }); }); 

Answer 2

change

 $('this')... 

to

 $(this)... 

and u can use hover() instead of using two separate functions

 $('.sub-status').hover(function() { $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); },function() { $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); }); 

updated

your violin does not work, since you are updating all the content of the hovering element ... the update should only be done in the <p> text.

 $('.sub-status').hover(function() { $(this).children('p') .removeClass() .addClass('unsubscribed') .html("<i>X</i> Unsubscribe"); },function() { $(this).children('p') .removeClass() .addClass('subscribed') .html("<i class='icon-check'></i> Subscribed"); }); 

working violin

Answer 3

Try using the hover function:

 $(".sub-status").hover( function () { $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); }, function () { $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); } ); 

http://api.jquery.com/hover/

Answer 4

Change 'this' to just this . Also consider the chain shown below, this will help users with weaker devices download files faster.

 $(document).ready(function() { $('.sub-status').mouseenter(function() { $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); }).mouseleave(function() { $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); }); });