html - 在移动设备中应用 css 属性 hover、ontouch

Question

下面是codePen的链接，你可以看看它的窗口大小然后图像在悬停时是否有边框，

在移动设备中，触摸边框。但如果用户没有触摸它(触摸它之后)，它不会消失。用户需要触摸图像外部然后其边框消失。

在下图中，用户触摸了图像及其显示的边框，之后用户没有触摸它并且它仍然显示边框。

 .swap {
  background-image: url('https://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg');
  width: 200px;
}

.swap a {
  display: block;
}

.swap a img {

  width: 200px;
  height: auto;


}
.swap a:hover img {
  border:10px black solid;
}

.swap a:focus img {
  border:none !important;
}

<div class="swap">
  <a>
    <img src="https://vignette.wikia.nocookie.net/undertale-au/images/5/54/Link.jpg/revision/latest?cb=20170903211129">
  </a>
</div>

Answer 1

添加 :focus 伪类将为您覆盖正在发生的事情。

.swap a:hover img {
  border:10px black solid;
}

.swap a:focus img {
  border:none !important;
}

如果您正在处理一个响应式元素，您不希望 :focus 在非触摸设备上显示，您可以尝试按尺寸定位设备，或者更可靠地，您可以使用 Modernizr 来特征检测。