code_note

タッチ端末での:hoverと:active

PC　:hover = 要素にマウスカーソルが乗っているときのスタイル
PC　:active = 要素をクリックしたときのスタイル

スマホ　:hover = タップ後、違う要素がタップされるまでのスタイル
スマホ　:active = タップ中のみのスタイル

→　PC:hover ≠ スマホ:hover
→　PC:hover ≒ スマホ:active

メディアクエリでスマホ用アクションに切り替える

@media (hover: hover) {
/* hover指定できるPCを想定したスタイル */
}
@media (hover: none) {
/* hoverが使えないタッチ端末を想定した装飾 */
}

/******* メディアクエリ での制御 *******/
/* :hoverが使える端末を想定 */
@media (hover: hover) {
  .link:hover {
    color: #f95d41;
  }
  .btn:hover {
    background-image: linear-gradient(#f95d41 0%, #f89e87 100%);
    box-shadow: 2px 8px 4px rgba(0, 0, 0, .3);
    transform: translateY(-8px);
  }
  .div:hover {
    background-image: linear-gradient(#f95d41 0%, #f89e87 100%);
    box-shadow: 2px 8px 4px rgba(0, 0, 0, .3);
    transform: translateY(-8px);
  }
  .li:hover {
    background-image: linear-gradient(#f95d41 0%, #f89e87 100%);
    box-shadow: 1px 4px 1px rgba(0, 0, 0, .3);
    transform: translateY(-4px);
  }
  .img:hover {
    opacity: .8;
    box-shadow: 2px 8px 4px rgba(0, 0, 0, .3);
    transform: translateY(-8px);
  }
}
/* :hoverが使えない端末を想定 */
@media (hover: none) {
  .link:active {
    color: #f95d41;
  }
  .btn:active {
    background-image: linear-gradient(#f95d41 0%, #f89e87 100%);
    box-shadow: 2px 8px 4px rgba(0, 0, 0, .3);
    transform: translateY(-8px);
  }
  .div:active {
    background-image: linear-gradient(#f95d41 0%, #f89e87 100%);
    box-shadow: 2px 8px 4px rgba(0, 0, 0, .3);
    transform: translateY(-8px);
  }
  .li:active {
    background-image: linear-gradient(#f95d41 0%, #f89e87 100%);
    box-shadow: 1px 4px 1px rgba(0, 0, 0, .3);
    transform: translateY(-4px);
  }
  .img:active {
    opacity: .8;
    box-shadow: 2px 8px 4px rgba(0, 0, 0, .3);
    transform: translateY(-8px);
  }
}

PC:SP ホバーアクションの切り替え

メディアクエリでスマホ用アクションに切り替える