Как скинуть функцию .hover() на тач девайсе?

Question

Всегда думал что .hover() сработает и на таче (как и css вероятно), но оказалось что нет. Вроде кое-как и работает, но увы только в одну сторону - на тач устройстве .hover - аналог клика, то есть класс вешается но как его убрать?

codepen

$(document).ready(function() {
  $('.helper__button').hover(function(e){
    e.preventDefault();
    $('.helper__popup').toggleClass('show')
  })
});

.helper__popup {
  display: inline-block;
  padding: 15px;
  background: #eee;
  border: 1px dashed #333;
  margin-top: 10px;
  visibility: hidden;
  opacity: 0;
}
.helper__popup.show {
  visibility: visible;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="helper">
  <button class="helper__button">?</button>
  <div class="helper__popup">
    any hidden content
  </div>
</div>

Answer 1

Здравствуйте! Попробуйте это.

CSS:

.helper__popup.hide {
  visibility: hidden;
  opacity: 0;
}

jQuery:

$(document).ready(function() {
    $('.helper__button').hover(function(e){
      e.preventDefault();
      $('.helper__popup').toggleClass('show')
  }, function(){
      $('.helper__popup').toggleClass('hide')
  });
});

Не уверен что сработает, но по идее должно, и всё же если не сработает то попробуйте по такой схеме:

$(document).ready(function() {
    $('.helper__button').mouseenter(function(e){
      e.preventDefault();
      $('.helper__popup').toggleClass('show')
  })
    $('.helper__button').mouseleave(function(e){
      e.preventDefault();
      $('.helper__popup').toggleClass('hide')
  })
});

Криво косо, но всё же что есть, то есть.

Answer 2

CSS вполне достаточно

.helper__popup {
  display: inline-block;
  padding: 15px;
  background: #eee;
  border: 1px dashed #333;
  margin-top: 10px;
  visibility: hidden;
  opacity: 0;
}
button:active+.helper__popup,
button:hover+.helper__popup{
  visibility: visible;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="helper">
  <button class="helper__button">?</button>
  <div class="helper__popup">
    any hidden content
  </div>
</div>

БЛОГ НА HUSL

Как скинуть функцию .hover() на тач девайсе?

Ответы (2 шт):