Question

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

Answer 1

通过添加新的CSS文件并对最大宽度设备使用条件注释，然后在这些新的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。

Answer 2

这需要一些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/

按下按钮时禁用iOS的行为：悬停状态

2 个答案: