【问题标题】:Removing hover effects on touch devices css删除触摸设备 css 上的悬停效果
【发布时间】:2016-03-07 14:21:48
【问题描述】:

我已经多次看到这个问题,但似乎没有什么适合我正在寻找的东西。

我需要在我的样式表中保留我的:hover 效果,因为我在桌面上有一些效果。只要我点击900px,我就想删除它们。

有没有办法删除悬停,例如,在悬停的某些元素上,我更改了不透明度。我能做到吗

@media screen and (max-width: 900px) {
  .my_element:hover {
    opacity: none:
  }
}

所以在移动/触摸屏设备上,悬停时不透明度的变化是默认的。

【问题讨论】:

  • 不透明度只能取 3 个值:数字(0..1)、初始值、继承以及在手机和平​​板电脑上悬停不起作用...

标签: javascript jquery html css hover


【解决方案1】:

这不是不透明度的正确默认值。默认值为opacity:1。您可以使用 MDN(或任何其他资源,但 MDN 通常将其放在前面和中心)查找默认值,如下所示:https://developer.mozilla.org/en-US/docs/Web/CSS/opacity


另一个选项是将其设置为initial。这将使规则opacity: initial;。 (注意这里是not supported in IE,但是edge支持)


最后,您可以考虑将悬停值放在相反的媒体查询中。对于您的示例,这将是以下内容:

我已经看过几次这个问题,但似乎没有什么适合我正在寻找的东西。

我需要在我的样式表中保留我的 :hover 效果,因为我在桌面上有一些效果。一旦我达到 900 像素,我就想删除它们。

有没有办法移除悬停,例如,在悬停的某些元素上,我更改了不透明度。我能做到吗

@media screen and (min-width: 901px) {
  .my_element:hover {
    /* your hover state style rules */
  }
}

【讨论】:

  • 谢谢哥们。这绝对是更好的方法。我只是想尝试通过添加none 来快速防止:hover 对移动设备的影响,但这非常快速且有效。
  • @DevJuniorThe50421st 不客气。很高兴我能帮上忙。
【解决方案2】:

您可以颠倒您的逻辑,使用移动优先的方法,而不是在 900 像素处添加悬停效果。即(最小宽度:900px)

【讨论】:

  • 是的,谢谢。约瑟夫提出了同样的建议。这是我选择和工作的。将我的 :hover 样式放入媒体查询中总是很快的
【解决方案3】:

没有简单的方法(据我所知)来简单地删除每个悬停效果。您必须重置每个悬停应用的各个效果。

但是,我想提一下,在大多数情况下,这样做是不必要的。对于触摸设备,不应出现悬停效果,因为没有可悬停的光标。就这样吧,认为它不可能到达。

【讨论】:

    猜你喜欢
    • 2017-07-02
    • 1970-01-01
    • 2012-02-16
    • 2017-01-12
    • 2013-10-22
    • 1970-01-01
    • 2023-04-07
    • 2022-01-17
    • 2013-06-18
    相关资源
    最近更新 更多