Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
58
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

スマホで触れている間だけhoverする

新たにしっかり書きましたので、長いですが下記記事を御覧ください。
スマホでhoverの動きをSassで矯正させるmixin

CSSにhoverを与えたとき、スマホではタップして指(指とは限らない)が離れるときに発火します。
感覚的にはタップした瞬間から離れるときまでの間がhoverであって欲しい。

ググるとjQueryのタッチイベントで、触れた瞬間から離れるまでの間にクラスを与えるという方法で回避しているようです。hoverを指定したものはPCではhover、スマホではタッチイベントになります。
個人的な考えですが、CSSで解決出来るものはCSSで解決したいです。

スマホに擬似クラスhoverを与えてはいけません。
指が離れてから発火してしまうので、スマホはtouchイベント、PCは:hoverなコードを書きます。

コード

jQuery
$('a, input[type="button"], input[type="submit"], button, .touch-hover')
  .on('touchstart', function(){
    $(this).addClass('hover');
}).on('touchend', function(){
    $(this).removeClass('hover');
});

hoverで変化がありそうな要素を入れてあります。
加えてhoverが必要になるものに.touch-hoverを与えます。
これでタッチしている間だけ.hoverが付きます。

html
<div class="touch-hover test">テスト</div>
<a href="#" class="test">テスト</a>

今回は.testをホバーしたときに文字色を変更します。

SCSS

mixin
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;


@mixin hover($tap-highlight:false) {
  @if $tap-highlight == false {
    &.hover {
      -webkit-tap-highlight-color: transparent;
      @content;
    }
  } @else {
    &.hover {
      @content;
    }
  }
  @media screen and (min-width: map-get($grid-breakpoints, lg)) {
    &:hover {
      @content;
    }
  }
}

コチラのコードがmixin。ブレークポイントはBootstrap4の値です。
(ブレイクポイントでPCかスマホか判別してますが、ユーザーエージェントのほうが確実)
リンクなどをタッチした際に背景がグレーになる-webkit-tap-highlight-color用に分岐してます。

scss
.test {
  @include hover() {
    color: red;
  }
}

includeでmixinを呼び出し、文字色を赤にします。

scss
.test {
  @include hover(true) {
    color: red;
  }
}

-webkit-tap-highlight-colorを活かしたいなら括弧の中に何か入れて下さい。

css

css
.test.hover {
  -webkit-tap-highlight-color: transparent;
  color: red;
}

@media screen and (min-width: 992px) {
  .test:hover {
    color: red;
  }
}

SCSSが吐き出したCSSです。
CSSに直接書くなら上記のコード。

終わり

疑似クラスactiveはPCだけに与えましょう。今回のコードとぶつかります。

今回Bootstrap4のブレークポイントが変更されていてびっくりしました。
Bootstrapを使うならSCSSの値を拾ったほうが安全ですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
58
Help us understand the problem. What are the problem?