下面是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>
最佳答案
添加 :focus
伪类将为您覆盖正在发生的事情。
.swap a:hover img {
border:10px black solid;
}
.swap a:focus img {
border:none !important;
}
如果您正在处理一个响应式元素,您不希望 :focus
在非触摸设备上显示,您可以尝试按尺寸定位设备,或者更可靠地,您可以使用 Modernizr 来特征检测。
关于html - 在移动设备中应用 css 属性 hover、ontouch,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51677140/