图像上的jQuery图像

我有一个图像库，我是ajaxing，我想让用户删除它们。所以当你将鼠标放在每一个上面时，一个X的小图像应该出现在角落，当点击时，它会将其删除。下面是我有图像上的jQuery图像

$(".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'd样图像：

<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（$（本）.ID）;返回一个未定义的，我没有看到delete.png出现。另外，我在jQuery API网站上读到live（）现在已经折旧了，我应该尝试使用on（）吗？

来源

2011-12-17 blueintegral

是的，请去.on（），因为.live（）已被声明为废弃，并可能从未来的版本中删除。 – techfoobar 2011-12-17 10:55:40

国际海事组织它最好做到：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>

来源

2011-12-17 11:07:32 Krzysztof

图像上的jQuery图像

回答

相关问题