Question

在桌面上使用class="content"将鼠标悬停在div上时，可以看到包含class="button"的div。还有一个回调，因此当它悬停在其他地方时会自动淡出。

但是，这不适用于移动设备，因为无法悬停。我尝试了不同的解决方案，比如添加其他伪类（：active，：focus）并尝试了一些JavaScript / jQuery。我也发现了这个问题How to simulate hover effect on touch devices?。我认为JS是解决这个问题的最佳方法，但我不习惯使用它。

这是我的HTML代码：

<div class="home">
  <div class="button">
    <div class="content"></div>
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3d2885;
  width: 100vw;
  height: 100vh;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 50vmin;
  height: 50vmin;
  background-color: white;
  border-radius: 50%;
}

.content {
  width: 0vmin;
  height: 0vmin;
  background-color: lightgreen;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.button:hover .content {
  width: 25vmin;
  height: 25vmin;
  border-radius: 15%;
}

我尝试了一些jQuery：

$('.button').bind('touchstart', function() {
        $(this).addClass('content');
});

$('.button').bind('touchend', function() {
        $(this).removeClass('content');
});

有人能告诉我如何实现jQuery（或其他），以便移动设备上的点击事件与桌面上的悬停效果具有相同的效果吗？在这种情况下，我的意思是class="content"的div在点击时具有过渡效果（增长），在点击其他地方时具有过渡效果（缩小）。

Codepen示例：https://codepen.io/elinehendrikse/pen/JJVRLm?editors=0110

触摸事件如何与桌面上的悬停效果具有相同的结果？

0 个答案: