How to display an image when hover and clicked on the respective 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;
}

How can I achieve the function in the JQuery above.

Answer 1

EDIT:

So after more info here's what I think you need:

$(".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

Can you try bellow code

 $(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();
       }
   });

});