如何使每个图像的关闭按钮悬停?有一个div，其中每个图像都是可拖动的。
我需要在每个图像附近做一个关闭按钮。那个按钮只有当我们触摸或移动鼠标指针在图像上时才需要可见，这是按钮需要显示在它的悬停效果。
这是我的HTML$( function() {
var a = 1;
$( ".child" ).draggable({
containment: "parent",
start: function(event, ui) { $(this).css("z-index", a++); }
});
} );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="parent" style="z-index:1; min-height: 200px; background-image: url('http://img.freepik.com/free-vector/white-canvas-background_1053-239.jpg?size=338&ext=jpg')">
<img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' style='position: absolute; z-index:1' class='child' />
<img src =' https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' style='position: absolute; z-index:1' class='child' />
<img src =' https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' style='position: absolute; z-index:1' class='child' />
</div>JSFiddle演示/strong>
我知道如何使用jquery删除该图像。例如下面的代码
$(document).on("click",".closeButton",function(){
$(this).closest('.child').remove();
});
用单独的div包裹每个图像，将.child类添加到div而不是image:
<div class="parent">
<div class='child'>
<img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
</div>
<div class='child'>
<img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
</div>
<div class='child'>
<img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
</div>
</div>
然后:
var a = 1;
$( ".child" ).draggable({
containment: "parent",
start: function(event, ui) { $(this).css("z-index", a++); }
}).hover(function(){
$(this).prepend('<button class="remove">x</button>');
}, function(){
$(this).find('.remove').remove();
}).on('click', '.remove', function(){
$(this).closest('.child').remove();
});
JSFiddle演示