Question

我在jquery中添加一个带有追加的按钮，我有两个问题

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();
});

演示：

＆＃13;

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

＆＃13;

.hover2 {
color:red;
}

＆＃13;

<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>

＆＃13;

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如果悬停元素添加按钮，如果不删除按钮

3 个答案: