1. tsuka-rinorino

    No comment

    tsuka-rinorino
Changes in body
Source | HTML | Preview
@@ -1,109 +1,108 @@
CSSに`hover`を与えたとき、スマホではタップして指(指とは限らない)が離れるときに発火します。
感覚的にはタップした瞬間から離れるときまでの間が`hover`であって欲しい。
ググるとjQueryのタッチイベントで、触れた瞬間から離れるまでの間にクラスを与えるという方法で回避しているようです。
ですが、タッチイベントではPCの`hover`が効きません。だったらタッチ系のイベントに加えhoverイベントも加えれば解決です。
しかし、個人的な考えですが、CSSで解決出来るものはCSSで解決したいです。
スマホに擬似クラス`hover`を与えてはいけません。
指が離れてから発火してしまうので、スマホはtouchイベント、PCは`:hover`なコードを書きます。
# コード
```js:jQuery
-$('a, input[type="button"], input[type="submit"], button, .touch-hover')
- .on('touchstart', function(){
+$('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:html
<div class="touch-hover test">テスト</div>
<a href="#" class="test">テスト</a>
```
今回は`.test`をホバーしたときに文字色を変更します。
## SCSS
```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の値です。
リンクなどをタッチした際に背景がグレーになる`-webkit-tap-highlight-color`用に分岐してます。
```scss:scss
.test {
@include hover() {
color: red;
}
}
```
`include`でmixinを呼び出し、文字色を赤にします。
```scss:scss
.test {
@include hover(true) {
color: red;
}
}
```
`-webkit-tap-highlight-color`を活かしたいなら括弧の中に何か入れて下さい。
## css
```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の値を拾ったほうが安全ですね。