Question

我有一个图像库，我正在调整，我想让用户删除它们。因此，当您将鼠标悬停在每个上方时，角落中会出现一个X的小图像，当单击时，它将删除它。这就是我所拥有的

$(".previews").live('mouseenter', function(){
console.log('mouse detected');
console.log($(this).id); 
    $(this).css({position:'relative'});
    $('<div />').text(' ').css({
        'height': $(this).height(),
        'width': $(this).width(),
        'background': 'url(delete.png) top left no-repeat',
        'position': 'absolute',
        'top': 15,
        'left': 170,
        'opacity': 0.0
    }).addClass("hover-tile").bind('mouseleave', function(){
            $(".hover-tile").each(function () { $(this).remove(); });
})
});

这是ajax的每个图像看起来像：

<div><ul><li class='spacer' style='list-style:none;'><img class='previews' id='" + image_id + "' src='http://whatever.com/default.jpg' /></li></ul></div>";

现在，console.log（$（this）.id）;返回一个未定义的，我没有看到delete.png出现。另外，我在jQuery API网站上读到live（）现在已经折旧了，我应该尝试使用on（）吗？

Answer 1

IMO最好这样做：hover css伪类。您可以立即使用图像渲染此div，但设置了display:none样式。这是示例代码：

<style>
.image {
    border: 1px solid grey;
    float: left;
    width: 160px;
    height: 120px;
    position: relative;
    text-align: center;
}

.image img {
    max-width: 160px;
    max-height: 120px;
}

.image .close {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
}

.image:hover .close {
    display: block;
}
</style>
<div class="preview">
    <div class="image">
        <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" />
        <div class="close" onclick="alert('delete')">X</div>
    </div>
    <div class="image">
        <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" />
        <div class="close" onclick="alert('delete')">X</div>
    </div>
    <div class="image">
        <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" />
        <div class="close" onclick="alert('delete')">X</div>
    </div>
</div>

图像上的jQuery图像

1 个答案: