しるてく

技術的な話をします

スマホで擬似的に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に変えてやるだけ。