スマホで擬似的にhoverを実装する
スマホで :hover を使うと、タップを話した後も色が変わったままだったりしてしまうので、class名をあてて擬似的にhoverを実装する必要があるようだ。
jQueryを使う場合
$( 'a' ).bind('touchstart', function(){ $(this).addClass( 'hover' ); }).bind('touchend', function(){ $(this).removeClass( 'hover' ); });
jQueryを使わない場合
var pseudoHover = function() { var elm = document.getElementsByTagName('a'); for(var i = 0, l = elm.length; i < l; i++) { elm[i].addEventListener('touchstart', function() { this.className = 'hover'; }, false); elm[i].addEventListener('touchend', function() { this.className = ''; }, false); } };
イベントまわりとか要素取得まわりはよしなにやってください。
CSS側
:hoverとかでやってたのを.hoverに変えてやるだけ。