在桌面设备上,我将我的元素设计为默认灰色,但当用户将鼠标悬停在它们上方时变为彩色。在移动设备上,我希望他们使用悬停状态 CSS 默认着色。是否可以通过 JavaScript 执行此操作?
我有很多具有不同颜色的元素,因此通过 JavaScript 简单地触发状态比编写新类并将它们添加到元素要容易得多。
最佳答案
不需要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/ 试试
关于javascript - 在移动设备上默认使用 hover/active CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55719596/