Question

我在网站上有: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;

Answer 1

您可以使用 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;
    }
  }
}

删除移动设备上的：悬停事件

1 个答案: