JQuery-div或img上的mouseenter和mouseleave是；“不稳定”；

当鼠标进入（悬停）图片时，我需要一个类似于div的关闭/删除按钮。因此，我创建了一个小div，它有一个times字符，并动态地定位在图片的左上角。当鼠标在img区域内移动时，这个小div会振动，当我想像div一样悬停这个按钮来点击某个动作时，它的行为就不符合预期。它不知怎么地不稳定

var timesDiv;
timesDiv = $('<div title="Delete Picture">&times;</div>');
timesDiv.css({
    'position': 'absolute',
    'cursor': 'pointer',
    'width': '25px',
    'height': '25px',
    'line-height': '25px',
    'font-size': '22px',
    'font-weight': 'bolder',
    'background-color': 'red',
    'color': 'white',
    'text-align': 'center'
});
$('.editable-picture').on('mouseenter', function() {
    var offset = $(this).offset();
    timesDiv.css({
        'top': offset.top + 'px',
        'left': offset.left + 'px',
        'display': 'block'
    });
    $('body').append(timesDiv);
});
$('.editable-picture').on('mouseleave', function() {
    timesDiv.css('display', 'none');
});

实际上，我使用的是“可编辑图片”类，如中所示：

<img class="editable-picture">

我需要一个动态解决方案，因此我使用javascript

更新：

---

按钮闪烁的原因是，当您用鼠标输入div时，新按钮位于

的顶部和外部，生成mouseleave事件

在父div和一些CSS上使用伪类“hover”同样容易

使用一些jQuery代码将按钮放在现有div中：

$('div.editable-picture').each(function() {
    $(this).append('<div class="delete">&times;</div>');
});

从DOM中删除实际图像的操作如下：

$('.editable-picture div.delete').click(function() {
    $(this).parent().find('img').fadeOut('fast', function() {
         $(this).parent().remove();   
    });
});

看看这个

更新：

如果您只需要使用

标记，则必须将append（）更改为wrap（），如下所示：

$('img.editable-picture').each(function () {
    $(this).wrap('<div class="editable-picture"></div>');
});

$（'img.editable picture'）。每个（函数（）{
$（此）.wrap（“”）；
});

---

在

中演示您所说的“动态解决方案”是什么意思？请用更多的示例代码更新你的fiddle…@ReinderWit他希望能够用

x

删除图片，我无法更改图像的HTML，也无法用div或其他符号将其包装。它有一个类“可编辑图片”，就是这样。它可以在页面中的任何位置。我希望从JavaScript方面完成一个解决方案。我的意思是“动态”，它应该独立于html端、模板等。对不起，英语中的错误用法…我已经更新了我的答案。您可以以任何方式操纵DOM，将各种事件附加到新创建的标记上。@ReinderWit这看起来很棒。在我的例子中，img有可编辑的图片类。我想我必须像你的例子那样用JQuery包装图像，所以我得出结论，我的问题是，将div附加到主体。相反，我需要一个包裹。然后，我应该附加到包装中。检查我的更新，它只有一个图像，然后被包装到另一个div中。最终，您将获得与我的第一个提琴中演示的相同的功能

$('.editable-picture div.delete').click(function() {
    $(this).parent().find('img').fadeOut('fast', function() {
         $(this).parent().remove();   
    });
});

$('img.editable-picture').each(function () {
    $(this).wrap('<div class="editable-picture"></div>');
});