在移动设备中应用CSS属性悬停，触摸

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进行功能检测。 / p>

Answer 2

所以我通过JavaScript事件，ontouchstart和ontouchend解决了这个问题，请查看下面的plunkr链接

https://plnkr.co/edit/bVFQMUjJXo5SvLGroQH3?p=preview

isVolatile

Answer 3

为另一个查询做准备，只需将P替换为您的元素。 现在看来，最好避免将悬停与ios一起使用，或者通常避免触摸。只要保持触摸状态，以下代码就会应用您的CSS，并且不会出现其他ios弹出窗口。这样做；

1. jquery添加：$（“ p”）。on（“ touchstart”，function（e）{$（this）.focus（）; e.preventDefault（）;}）;

   < / li>

2. CSS：将p：hover替换为p：focus，并添加p：active

选项；

• 用任何类等替换jquery p选择器

• 要保持效果，请保持p：hover并添加body {cursor：ponter;}，以便在任意位置轻按即可结束

• 尝试单击和鼠标悬停事件以及同一代码中的touchstart（但未经测试）

• 删除e.preventDefault（）;使用户能够利用iOS弹出窗口，例如复制

注释

• 仅针对文本元素进行了测试，ios可能会对输入等进行不同的处理

• 仅在使用Safari或Chrome的iphone XR ios 12.1.12和ipad 3 ios 9.3.5上进行了测试。