Событие наведения, но не на сенсорных/мобильных устройствах

Я пытаюсь создать событие наведения, которое показывает изображение. На моем рабочем столе/ноутбуке он срабатывает правильно. Однако на мобильном телефоне (сенсорный экран) изображение появляется только при нажатии на модальную ссылку, после чего оно прилипает (остается на экране).

На мобильных или сенсорных экранах я не хочу, чтобы событие наведения срабатывало.

Вот с чем я работаю.

Jsfiddle

HTML

<a href="#test" id="test-parent">Hover to show image</a>

<img class="preview" id="test-child" src="https://mayvers.com.au/wp-content/uploads/2017/09/test-image.jpg" />

<script>
  $("#test-parent").hover(function() {
    $("#test-child").fadeToggle();
  });
</script>

CSS

.preview {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  height: 50%;
}

jquery hover jquery-hover
person kylie2675647    schedule 25.11.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете проверить, является ли это событием касания или нет, и соответственно активировать эффект наведения.

<script>
  $("#test-parent").hover(function() {
   if(!isTouchEvent()){
    $("#test-child").fadeToggle();
   }
  });

  function isTouchEvent() {
    return 'ontouchstart' in document.documentElement
           || navigator.maxTouchPoints > 0
           || navigator.msMaxTouchPoints > 0;
  }

</script>

Демонстрация JSFiddle

person Bhushan Kawadkar    schedule 25.11.2019

arrow_upward
0
arrow_downward

от @PaulOB на сайте sitepoint

<script>
  if (!("ontouchstart" in document.documentElement)) {
      $("#test-parent").hover(function() {
       $("#test-child").fadeToggle();
    });
   } 
</script>
person kylie2675647    schedule 25.11.2019