CSS悬停不被触摸屏设备

我追加一个div一个html按钮忽略。我的问题是，当点击触摸屏设备上的按钮时，按钮将保持其悬停状态，直到点击另一个元素。CSS悬停不被触摸屏设备

使用触摸屏设备浏览时，有没有什么办法可以忽略悬停属性？通过悬停psuedos：

2012-12-18 richhastings

你有属性'type =“button”'？如果没有，默认情况下该按钮变成提交按钮。 –

@PatrickJamesMcDougle根本不是真的。提交按钮什么？！ – Neal

@Neal是的，看看规范。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html“缺少的值默认是提交按钮状态。” –

不是一个理想的解决方案，但由于@dualed的领先地位！

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */ 
{ 
    button.restart:hover 
    { 
     /* replicate 'up' state of element */ 
    } 
}

来源

2012-12-18 16:55:37 richhastings

如何在鼠标插入纵向的小型便携式计算机（例如MS表面）？这是一种次理想的方法。 – dudewad

我最近碰到这个确切的问题来了，iOS版似乎认为悬停伪为另一次点击，这样的链接将需要点击两次等

如果使用modernizr你可以申请你的。非触摸类应用于html标签。

这样：

html a { color:#222; } 

html.no-touch a:hover { color:#111; }

来源

2012-12-18 15:48:49

以下是关于如何触发可点击元素上的事件的iOS文档：http：//developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/ uid/TP40006511-SW7 –

也许这不是你想要的，但你可以指定依赖于介质的不同的CSS样式表：

<link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css"> 
<link rel="stylesheet" media="print" href="print.css" type="text/css"> 
<link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

在上面的例子中

，main.css的将被用于电脑屏幕，但对于handeld设备，它将是smallscreen.css

来源

2012-12-18 15:49:07 Slauster

是正确的，但几乎所有的触摸设备目前都将自己报告为“屏幕”，而非手持设备。 –

您可以在CSS规则中指定媒体类型。

@media handheld { 
    button.restart:hover { 
    /* undo hover styling */ 
    } 
}

但是，请注意，手持设备不一定有触摸屏。

（顺便说一句，这是CSS不是jQuery的）

来源

2012-12-18 16:19:05 dualed

手持设备工作不好，但通过在查询中指定设备宽度，我有一个解决方案。 – richhastings

@ rhastings可能工作，但可能有其他副作用。您可能必须指定确切的设备大小。令人遗憾的是Mozilla的'-moz-touch-enabled'在webkit上没有相应的实现。另外，我假设我们正在谈论移动产品的i范围，请看这里http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 – dualed

-2

一个很好很容易的方法是使用Modernizr。

当Modernizr的运行，这将增加在HTML 标签的类属性的条目为每一个功能，它检测，同时无前缀的功能，如果浏览器不支持它。

现在加上下面几行到你的CSS样式表

.touch *:hover { 
    display: none; 
}

自由地使用：只要你喜欢多次徘徊。当您的网站在触摸屏上查看悬停效果时，所有元素都将被禁用。

来源

2013-08-08 13:16:23

不错的主意，但不起作用... – MMachinegun

另外，*在CSS是*令人难以置信*效率低下。但是，从技术角度来看，这种技术应该起作用。 – dudewad

CSS悬停不被触摸屏设备

回答

相关问题