在移动设备中应用 css 属性 hover、ontouch答案

【问题标题】：Apply css property hover, ontouch in mobile devices在移动设备中应用 css 属性 hover、ontouch
【发布时间】：2019-01-11 21:10:04
【问题描述】：

下面是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>

【问题讨论】：

codepen.io/SahilKatia/pen/GBGEXa
仅供参考，悬停在移动/触摸设备中无法处理悬停事件您需要使用 javascript 或 jQuery 进行触摸事件，就像 [stackoverflow.com/questions/4755505/…
谢谢，刚才我也发现了，在一个元素上同时使用 touchstart 和 touchend 可以解决我的问题

标签： html css sass

【解决方案1】：

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

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

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

如果您正在处理一个不希望 :focus 在非触控设备上显示的响应式项目，您可以尝试按尺寸定位设备，或者更可靠地，您可以使用 Modernizr 进行功能检测。

【讨论】：

它还在
对不起...我完全误读了您的问题。我以为你想知道如何添加它。现在编辑我的答案。
我用你的代码更新了codepen，但它不起作用，在移动视图中，如果我触摸它，它会占用边框，稍后如果我不触摸它，边框仍然存在
现在看看我修改后的答案。 ;)
用户需要触摸图像外部，然后它的边框就会消失。（我们不想要这个功能）。如果用户没有触摸它，它不应该显示边框

【解决方案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>

【讨论】：

【解决方案3】：

准备另一个查询，只需将 P 替换为您的元素。现在似乎最好避免将悬停与 ios 或触摸一起使用。只要保持触摸并且没有其他 ios 弹出按钮，下面的代码就会应用您的 css。这样做；

Jquery 添加：$("p").on("touchstart", function(e) { $(this).focus(); e.preventDefault(); });
CSS：将 p:hover 替换为 p:focus，并添加 p:active

选项；

将 jquery p 选择器替换为任何类等
要保留效果，请保持 p:hover 为好，并添加 body{cursor:ponter;} 以便在任意位置点击结束
在相同的代码中尝试单击和鼠标悬停事件以及 touchstart（但未经测试）
删除 e.preventDefault();使用户能够使用 ios 弹出窗口，例如复制

注意事项

仅针对文本元素进行测试，ios 可能会以不同方式处理输入等
仅在 iphone XR ios 12.1.12 和 ipad 3 ios 9.3.5 上使用 Safari 或 Chrome 进行测试。

【讨论】：