悬停事件，但不在触摸/移动设备上

2024-05-21 • 问答

我正在尝试创建一个显示图像的悬停事件。在我的台式机/笔记本电脑上，它可以正确启动。但是，在移动设备（触摸屏）上，仅当单击模式链接时，该图像才会显示，然后变为粘性（停留在屏幕上）。

在移动或触摸屏上，我不希望触发悬停事件。

这就是我正在使用的东西。

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%;
}

dgdfhdshdsh 回答：悬停事件，但不在触摸/移动设备上

您可以检查是否为触摸事件，并相应地触发悬停效果。

<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 Demo

从@PaulOB到站点点

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

hover jquery jquery-hover

本文链接：https://www.f2er.com/3036081.html

悬停事件，但不在触摸/移动设备上

dgdfhdshdsh 回答：悬停事件，但不在触摸/移动设备上

大家都在问