2

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

4

2 回答 2

0

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

于 2013-07-26T19:09:50.980 回答
0

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

苹果手机

    <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 内容。

于 2012-05-14T14:41:07.953 回答