Search code examples
jqueryhoverjquery-hovermousehover

Jquery if hover element add a button if not remove button


I am adding a button in jquery with append, bot I got 2 problems

1- keeps adding this button everytime I hover.

2 -when is not hover the button still there.

$('#user tbody tr td').hover(function() {
   $(this).addClass('hover2').append('<button>add user</button>');
}, function() {
 $(this).removeClass('hover2').remove('<button>add user</button>');
});

Solution

  • $('#user tbody tr td').hover(function() {
       $(this).addClass('hover2').append('<button>add user</button>');
    }, function() {
     $(this).removeClass('hover2').find('button').remove();
    });
    

    sample using <div> element

    http://jsfiddle.net/xtb51wed/1095/