Question

当鼠标进入（悬停）在图片上时，我需要在图片上关闭/删除按钮式div。所以，我创建了一个小div，它有一个时间字符并动态定位在图片的左上角。当鼠标在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');
});

您可以在此处查看：http://jsfiddle.net/724L9/

我也尝试过悬停：

$('.editable-picture').hover(function() {
    var offset = $(this).offset();
    timesDiv.css({
        'top': offset.top + 'px',
        'left': offset.left + 'px',
        'display': 'block'
    });
    $('body').append(timesDiv);
}, function() {
    timesDiv.css('display', 'none');
});

@Reinder Wit实际上，我正在使用“可编辑图片”类，如：

<img class="editable-picture">

我需要动态解决方案，因此我使用的是javascript。

更新：

http://jsfiddle.net/jUuDS/

Answer 1

按钮闪烁的原因是当您使用鼠标输入div时，新按钮位于<div>的顶部和外部，从而生成mouseleave事件。

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

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

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

并使用CSS将display设置为无。将鼠标悬停在父div上时，请将display设置为阻止：

.editable-picture:hover .delete {display:block}

从DOM中删除实际图像可以这样做：

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

查看此DEMO

<强>更新

如果您只使用<img>标记，则必须将append（）更改为wrap（），如下所示：

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

在this DEMO

中展示

在div或img上的JQuery- mouseenter和mouseleave是不稳定的＆＃34;

1 个答案: