应用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>

- Developer

---

https://codepen.io/SahilKatia/pen/GBGEXa - Developer

FYI，移动/触摸设备中无法使用悬停事件，您需要使用JavaScript或jQuery的触摸事件来处理悬停事件，就像[https://dev59.com/fm445IYBdhLWcg3wpb8P]中所示。 - Bharat Makvana

谢谢，刚才我也发现了这一点，同时在一个元素上使用touchstart和touchend就可以解决我的问题。 - Developer

Answer 1

添加:focus伪类将帮助您覆盖正在发生的内容。

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

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

如果您正在开发一个响应式项目，并且不希望在非触摸设备上显示:focus，您可以尝试通过大小来针对设备，或者更可靠地使用Modernizr进行特性检测。

- brianespinosa

---

它仍然在那里。 - Developer

对不起，我完全误读了你的问题。我以为你想知道如何添加它。现在正在编辑我的答案。 - brianespinosa

现在请看一下我修改后的答案。 ;) - brianespinosa

用户需要触摸图像外部，然后边框才会消失（我们不想要这个功能）。如果用户没有触摸它，则不应显示边框。 - Developer

我添加了截图以更好地解释，请查看。 - Developer

Answer 2

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

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

function myFunction()
{
    document.getElementById('swap').setAttribute("class", "style1");
}

function myFunctions()
{
    document.getElementById('swap').setAttribute("class", "style2");
}



 <div id="swap">
  <a><img src="https://vignette.wikia.nocookie.net/undertale-au/images/5/54/Link.jpg/revision/latest?cb=20170903211129" ontouchstart="myFunction()" ontouchend="myFunctions()"   >
      </a>
    </div>

- Developer

Answer 3

准备好另一个查询，只需将P替换为您的元素。 现在似乎最好完全避免使用ios或触摸上的悬停效果。以下代码应用您的CSS，只要保持触摸，并且没有其他ios弹出窗口。做这个：

1. Jquery add: $（“p”）.on（“touchstart”，function（e）{ $（this）.focus(); e.preventDefault(); }）;

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

选项；

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

• 保持p：hover效果不变，并添加body {cursor：ponter;}，以便在任何地方轻击即可结束

• 尝试在同一代码中使用单击和mouseover事件以及touchstart（但未经测试）

• 删除e.preventDefault（）; 以启用用户使用ios flyouts，例如复制

注意事项

• 仅测试了文本元素，iOS 可能会以不同的方式处理输入等

• 仅在 iPhone XR iOS 12.1.2 和 iPad 3 iOS 9.3.5 上使用 Safari 或 Chrome 进行了测试。

- darren