rad*_*ken 1 javascript css jquery sass
我的:hover活动在网站上运行，但是当您在移动设备上使用该系统时遇到问题。
有没有办法在css或js中删除它？我尝试了很多东西，但我没有运气。
我尝试了 Modernizr.com 和媒体查询，但没有成功。
我的 sass 代码：
ul {
li {
padding: 20px;
&:hover {
background-color: $red;
color: $black;
}
}
}
媒体查询：
@media (max-width: $screen-sm-min) {
ul {
li {
&:hover {
color: inherit;
cursor: pointer;
}
}
}
}
sass mq 变量：
$screen-sm-min: 768px;
您可以将CSS 媒体查询用于交互功能，但它们相对较新，iOS9 + 和 Android 5+：http ://caniuse.com/css-media-interaction
您可以使用仅:hover在此功能可用的情况下应用样式
/* :hover will only work in Edge, Chrome, Safari 9+ for now */
@media (hover: hover) {
.your-selector:hover {
color: red;
}
}
或者，如果您现在想要更广泛的支持，请仅:hover在可能的情况下删除：
/* :hover will be removed in iOS 9+ and Android 5+ */
.your-selector:hover {
color: red;
}
@media (hover: none) {
.your-selector:hover {
color: oldcolor;
}
}
如果您想要更广泛的支持，则需要通过 javascript 检测触摸功能。一个相当标准的方法是这样的：
/* add a class to <html> */
var isTouch = 'ontouchstart' in window;
document.documentElement.className += isTouch?' touch ':' no-touch ';
/* only use hover when the no-touch class is present */
.no-touch {
.your-selector:hover {
color: red;
}
}
在您的代码中使用最后一个解决方案：
ul {
li {
padding: 20px;
.no-touch &:hover {
background-color: $red;
color: $black;
}
}
}