Как я могу включить обнаружение кнопки или подсвечивания внутри метки? - PullRequest
Новая
       9

Как я могу включить обнаружение кнопки или подсвечивания внутри метки?

0 голосов
/ 23 октября 2018

У меня есть код для галереи изображений, созданной с помощью начальной загрузки, где я хотел бы удалить кнопку на ролловере.Тем не менее, div или кнопка (что бы ни работало) абсолютно расположены над изображением внутри метки, где можно кликнуть по всему изображению.

Мой код для этого здесь - https://codepen.io/leecolarelli/pen/ZqMmrw

IЯ пытался поместить <i class="fa fa-times"></i> внутри элемента или кнопки и располагать этот элемент или кнопку вне тега метки, но он все равно не работал.

Как сделать крестик кликабельным? 

<!-- 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");
    });
})

1 Ответ

0 голосов
/ 23 октября 2018 
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;
    }
}
...