按下带有 :hover 状态的按钮时禁用 iOS 的行为答案

【问题标题】：Disabling the behaviour of iOS when pressing buttons with :hover states按下带有 :hover 状态的按钮时禁用 iOS 的行为
【发布时间】：2012-05-13 14:13:29
【问题描述】：

当我使用 iPad 时，我经常点击网站上的按钮，而 iOS 所做的是它实际上切换了设计师创建的 :hover 状态，这只是一个实际的 :hover 事件。我制作了一个网站，该网站正遭受这种毫无意义的行为。例如，您可以单击不离开页面的按钮，但在 iOS 中，它将永久显示该按钮的悬停状态。怎样才能优雅地消除这种深思熟虑的行为 ?

【问题讨论】：

标签： jquery html css ios hover

【解决方案1】：

这将需要一些 javascript，但这是我能想到的最佳解决方案。

基本上，您将覆盖默认样式，然后切换一个类，而不是依赖悬停事件。

我想说这个解决方案非常简单，用户既可以点击顶级链接，也可以展开/折叠链接

HTML

<ul>
  <li><a href="some-url">link name <span></span></a>
       <ul>
           <li><a href="some-url">link name</a></li>
       </ul>
  </li>
  <li><a href="some-url">link name <span></span></a></li>
  <li><a href="some-url">link name <span></span></a></li>
</ul>

CSS

li{width:200px;}

li a span{
    display:inline-block;
    height:10px;
    width:10px; 
    background:#000;
    float:right;
}
/* Standard menu system */
li ul{display:none}
li:hover ul {display:block}


/* Override for ios */
/* Needs to be inside some media query */
/* Something like @media(max-width:497px) */

li:hover ul{display:none;}

li.hovered ul{display:block}

Javascript (jquery)

    $('nav li a span').click(function (e) {
        e.preventDefault();
        $('nav li').not($(e.target).parents('li')).removeClass('hovered');
        $(e.target).parent('a').parent('li').toggleClass('hovered');
    })

工作 JsFiddle

http://jsfiddle.net/styks1987/DY6kS/2/

【讨论】：

【解决方案2】：

例如，通过添加新的 CSS 文件并为最大宽度设备使用条件 cmets，然后在这些新的 css 文件中重置悬停状态...

iPhone

    <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/iphone.css" type="text/css" title="no title"/>

iPad

    <link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>

然后只需调整为这些设备输出的 CSS。

【讨论】：