圖像上的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圖像

回答

相關問題