CSS如何对支持Hover的电脑才应用相关样式-css教程-PHP中文网

最可靠方式是使用matchmedia("(hover: hover)").matches检测输入能力，而非ua或touchstart；css中用@media (hover: hover)包裹:hover规则，js中仅在匹配时绑定mouseenter/mouseleave，并监听change事件响应动态变化。

css如何对支持hover的电脑才应用相关样式

检测设备是否支持hover伪类

浏览器本身不提供直接判断“当前设备是否支持hover”的API，但可以通过matchMedia查询(hover: hover)媒体特性——它在鼠标指针可悬停（如桌面浏览器）时返回true，在纯触控设备（如iOS Safari、Android Chrome默认模式）中返回false。

注意：这个特性检测的是**输入能力**，不是屏幕尺寸或UA字符串。哪怕你在平板上接了蓝牙鼠标，现代浏览器也会正确报告(hover: hover)为true。

matchMedia("(hover: hover)").matches 是最可靠、被广泛支持的判断方式（Chrome 38+、Firefox 30+、Safari 9+、Edge 12+）
不要用navigator.userAgent识别“PC/手机”，它既不可靠又容易过期
不要监听touchstart后禁用hover样式——这会破坏混合输入设备（如二合一笔记本）的体验

CSS中条件性启用hover样式

直接在CSS里用@media (hover: hover)包裹hover规则，是最干净的做法。这样CSS引擎只在支持hover的环境下解析并应用这些样式，完全避免无效规则干扰渲染。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

button {
  background: #ccc;
}
@media (hover: hover) {
  button:hover {
    background: #007bff;
  }
}

写在:hover外面的@media块，能确保触控设备完全忽略该规则，不参与样式计算
别写成@media (hover: hover) and (pointer: fine)——pointer: fine虽常伴随hover，但不是必要条件，且兼容性更差（Safari 15.4+才支持）
如果用了CSS-in-JS（如Emotion、Styled Components），需确认其支持媒体查询嵌套；否则得退回到JS中动态插入class

JavaScript中按需加载hover交互逻辑

光关掉CSS hover不够——如果JS里还绑了mouseenter/mouseleave，在触控设备上会触发意外行为（比如空转事件监听、误触发tooltip）。应该只在(hover: hover)为true时才注册这些监听。

if (matchMedia("(hover: hover)").matches) {
  button.addEventListener("mouseenter", handleHoverIn);
  button.addEventListener("mouseleave", handleHoverOut);
}