超簡単cssでスマホ版のhoverをなくす方法

PC版にはcssでホバーエフェクトをつけたいが、

スマホ版では、cssでホバーエフェクトをなくしたい場合の設定方法

javascriptとかは面倒なので、cssだけで解決する。

*モバイルファースト（スマホファースト）のcssの書き方

/* PC版 */
@media screen and (min-width: 567px) {
li a {
  color: white;
  padding-left: 32px;
}

li a:hover {
  color: pink;
  padding-left: 40px;
}

}

上記のようにPC版では、cssホバー時に、色を変更して右に8pxずらす設定とする。

モバイルファースト（スマホファースト）なので、PC版より先にスマホの設定をしてあげれば良い。

上記に記述を加えるとこんな感じ↓

/* SP版 */
li a:hover {
  color: white;
  padding-left: 32px;
}


/* PC版 */
@media screen and (min-width: 567px) {
li a {
  color: white;
  padding-left: 32px;
}

li a:hover {
  color: pink;
  padding-left: 40px;
}

}

単純にスマホ版のaタグの箇所をPC版と同じにすれば、動作がしなくなる。
（動作しているけどPCと同じ設定なので変化しない）

たったこれだけで、PC版とスマホ版を切り分けることができた。

コツは、スマホ版はPC版より先に設定すること。