如何在标签内启用按钮或 div 悬停检测？

Question

我有使用 bootstrap 创建的图片库的代码，我希望在滚动时有一个删除按钮。但是，div 或按钮（无论有效）绝对位于标签内的图像上方，整个图像都可以点击。

我的代码笔在这里 - https://codepen.io/leecolarelli/pen/ZqMmrw

我试过将 <i class="fa fa-times"></i> 放在 div 或按钮中，并将 div 或按钮放在标签标签之外，但仍然无效。

我怎样才能让十字可以点击？

<!-- Start of: Image Entry -->
<div class="col-xs-6 col-sm-4 col-md-3 text-center">
       <label class="image-checkbox">
              <img class="img-fluid" src="https://via.placeholder.com/600x400" />
              <input type="radio" id="" name="presetimage" value="" />
              <i class="fa fa-check"></i>
              <i class="fa fa-times"></i>
       </label>
</div>
<!-- End of: Image Entry -->

.image-checkbox {
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 4px solid transparent;
  margin-bottom: 0;
  outline: 0;
  position: relative;
  input[type="checkbox"] {
    display: none;
  }
  input[type="radio"] {
    display: none;
  }
  &:hover {
    .fa-times {
      visibility: visible;
    }
  }
  &.image-checkbox-checked {
    border-color: #4783B0;
    .fa-check {
      visibility: visible;
    }
  }
  .fa {
    position: absolute;
    color: #4A79A3;
    background-color: #fff;
    padding: 10px;
    visibility: hidden;
    &.fa-check {
      top: 0;
      right: 0;
    }
    &.fa-times {
      top: 0;
      left: 0;
    }
  }
}

$(function () {
    $('input[name="presetimage"]').on('click', function() {
        $(".image-checkbox-checked").removeClass("image-checkbox-checked");
        $(this).parent().toggleClass("image-checkbox-checked");
    });
})

Answer 1

Cross mark can be made clickable as follows,

$('.fa-times').on('click', function(e){
    alert("Cross mark clicked");
});

And also comment the css border color as follows as it appear whole image is selected

&.image-checkbox-checked {
    /*border-color: #4783B0;*/
    .fa-check {
        visibility: visible;
    }
}

如何在标签内启用按钮或 div 悬停检测？

How can I enable a button or div hover detection inside a label?

html

javascript

css

twitter-bootstrap

codepen