本文介绍了触摸屏设备上的 CSS 悬停不会被忽略的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!
问题描述
我添加了一个带有 html 按钮的 div:
I've appended a div with a html button:
$('.nav').append('<button class="restart">Restart</button>');
该按钮具有用于悬停的 css 属性.我的问题是,当点击触摸屏设备上的按钮时,按钮会保持悬停状态,直到点击另一个元素.
The button has css properties for hover. My problem is that when tapping the button on a touch-screen device, the button retains its hover state until another element is tapped.
在使用触屏设备浏览时,有什么方法可以忽略悬停属性?
Is there any way that the hover property can be ignored when browsing with a touch-screen device?
推荐答案
不是一个理想的解决方案,但感谢@dualed 的领先!
Not an ideal solution, but thanks @dualed for the headstart!
@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
button.restart:hover
{
/* replicate 'up' state of element */
}
}
这篇关于触摸屏设备上的 CSS 悬停不会被忽略的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!