javascript - 在移动设备上默认使用 hover/active CSS

Question

在桌面设备上，我将我的元素设计为默认灰色，但当用户将鼠标悬停在它们上方时变为彩色。在移动设备上，我希望他们使用悬停状态 CSS 默认着色。是否可以通过 JavaScript 执行此操作？

我有很多具有不同颜色的元素，因此通过 JavaScript 简单地触发状态比编写新类并将它们添加到元素要容易得多。

Answer 1

不需要JS!您可以使用 CSS 中的媒体查询来完成此操作。注意:在此示例中，我使用 Bootstrap 4 的屏幕尺寸数字:

.element:hover {
  background-color: gray
}

@media only screen and (max-width: 767px) {
  .element {
    background-color: gray;
  }
}

Bootstrap 以 768 像素开始中等屏幕尺寸，因此我的最大宽度为 767。如果你愿意，可以在 https://jsfiddle.net/21haxstd/ 试试