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 that 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 is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.

Thanks.

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 that 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 is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.

Thanks.

• javascript
• jquery
• html

4 Answers 4

Change

$('this')...

to

$(this)...

And you 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 fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.

$('.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 fiddle

Here, try this. Working demo: http://jsfiddle/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");
    });
});

Try to use a 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./hover/

Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff 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>");
    });
});