我正在将悬停状态样式应用于这样的 div:
div {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
现在,我不想将此 css 样式应用于 ipad 和其他平板电脑。所以,我添加了这样的媒体查询
div {
@media only screen {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
}
这个我也试过
div {
@media not handheld {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
}
但是,悬停样式仍然适用于 ipad。 我是媒体查询的新手。
知道如何使用 css/less/media 查询来实现这一目标吗?或者我在这里做错了什么?
谢谢!
最佳答案
感谢@Ashish 和@DOC ASAREL,设置 min-width 成功了。
这是解决方案:
@media (min-width: 1281px) {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
关于html - 仅使用媒体查询将悬停状态应用于桌面版本(没有平板电脑和手机),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26149199/