Jquery 如果悬停元素添加按钮，如果不删除按钮

Question

我在 jquery 中添加一个带有附加功能的按钮，机器人我遇到了 2 个问题

1- 每次悬停时都会添加此按钮。

2 - 当悬停按钮不在时。

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

Answer 1

使用 mouseenter/mouseleave 个事件

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

演示：

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

.hover2 {
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="user"><tbody><tr><td>mouse</td></tr></tbody></table>

Answer 2

您添加的内容和删除的内容不匹配。您应该以某种方式找到您之前添加的元素并将其删除。

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

Answer 3

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

样本使用 <div> 元素

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

Jquery 如果悬停元素添加按钮，如果不删除按钮

Jquery if hover element add a button if not remove button

jquery

hover

mousehover

jquery-hover