悬停并单击移动设备和桌面时一致的 CSS img 过渡

Question

我有一个

img

，周围有一个

a href

，当我用鼠标悬停它时，它会移动并缩放（

transition

/

transform

）。当我点击时，它也会给我带来

a href

的目的地。到目前为止，一切都很好。

但是在移动设备上我无法将其悬停，只需单击一下，因此有一个短暂的过渡，然后重定向到

a href

的目的地。

我期望/想要什么？在桌面上，保持原样。在移动， 第一次单击，应用变换。第二次单击，重定向到

a href

的目的地。我怎样才能实现这个目标？

/* IMAGE STYLES */

.banner_img_a img {
  position: relative;
  filter: drop-shadow(0px 0px 3px #000000);
  z-index: 100;
  transform: scale(1) rotate(20deg);
  transition: .3s opacity ease, .3s transform ease;
}


/* IMAGE STYLES HOVER*/

.banner_img_a img:hover {
  position: relative;
  z-index: 2000;
  transform: scale(2) rotate(0deg)translate(20px, 20px);
}

<a href="#" class="banner_img_a">
  <img src="https://i.postimg.cc/ZRQFt9Yc/google.jpg" width="79" height="51">
</a>

Answer 1

您不应在构建移动用户界面时考虑到

hover

。它根本不存在，如果强加给用户，通常会导致糟糕的用户体验，如评论中所述。但以下是我通过谷歌搜索找到的一些替代方案：https://uxpickle.com/alternatives-to-hover-interaction-on-touchscreens/