ボタンを押したときにiOSの動作を無効にする：ホバーの状態

Question

iPadでサイトのボタンをクリックすると、実際にはデザイナーが作成したホバーの状態を実際に切り替えることができます実際：ホバーイベントです。私はこの無意味な振る舞いに苦しんでいるウェブサイトを作りました。 たとえば、ページを離れないボタンをクリックすることはできますが、iOSでは、そのボタンのホバー状態が永久に表示されます。 どのようにしてこの邪悪な行為をエレガントに取り除くことができますか ？新しいCSSファイルを追加すると、最大幅のデバイスのための条件付きコメントを使用して、例えば、これらの新しいCSSファイルにホバー状態をリセットすることにより

Answer 1

...

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（jquer Y）

$('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/