Question

如何在悬停时为每张图片制作关闭按钮？有一个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 demo

我知道如何使用jquery删除该图像。例如像这样的代码

$(document).on("click",".closeButton",function(){
    $(this).closest('.child').remove();
});

Answer 1

使用单独的div包裹每张图片，将.child类添加到div而不是图片：

<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 Demo

如何使用CSS和js为div内的每个图像创建一个关闭按钮

1 个答案: