如何在悬停并单击相应的div时显示图像

Question

CSS：

.imgECheck {
    position: absolute;
    top: 0;
    right: 5px;
    width: 15px;
    height: 15px;
    display: none;
}
.imgFCheck {
    position: absolute;
    top: 0;
    right: 5px;
    width: 15px;
    height: 15px;
    display: none;
}

如何在上面的JQuery中实现该功能。

Answer 1

编辑：

所以在了解更多信息之后我认为你需要的是：

$(".btn-small").on("hover", function(){
    $(".imgECheck").addClass("show");
});


$(".btn-small").click(function(){
    $(".imgECheck").removeClass("show");
    $(".imgFCheck").addClass("show");
});

Answer 2

$(function () {
    $(".btn-small").on("click", function () {
       $('.imgFCheck').hide();
       $(this).find('.imgFCheck').show();
    });
});

Answer 3

你可以尝试下面的代码

 $(function () {
    $('.imgFCheck').hide();

  $(document).on('click','.btn-small', function () {

    $(this).find('.imgFCheck').show().toggleClass('is-clicked');

  });

  $(document).on('hover','.btn-small', function () {
     if(!$(this).find('.imgFCheck').hasClass('is-clicked'))
      {
        $(this).find('.imgFCheck').toggle();
       }
   });

});