CSSの疑似クラスが便利そう

CSSの疑似クラスというものを知りました。

jQuery hover()をPCとタッチスクリーンで分ける - ikapでJavascriptでhoverを管理していた。

しかし、CSSの疑似クラスを使えば、割と容易にhoverができるようだ。

<selector>:hover {
    background: #EFA;
}

これだけで、カーソルが乗っていれば背景を変更してくれる。 タッチスクリーン端末でも若干気になるところはあるが、動作した。

もしかしたら、iosのSafariでタップできない問題があるかもしれないが、タップ可能にしたい要素に onclick=""をつけると動く。参考: ios - Fix CSS hover on iPhone/iPad/iPod - Stack Overflow

htmlとCSSとJavascriptは奥が深いですね。

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with amazlet at 17.08.15

服部 雄樹
技術評論社
売り上げランキング: 3,595

Amazon.co.jpで詳細を見る