タブレットで、hoverのためにどうさの不具合が出るときがありませんか。
プルダウンとか、ボタンとか、ホバーしないと表示されないとか２回タップしないといけないとかなにかと面倒なことがあったります。
そこで、cssでhoverが使えるかの判定をしてできる場合は使うとしても
プルダウンの場合はやっぱり、javascriptを使うのがいいと思います。

ってことで、今回はcssとjavascriptでhoverが使えるデバイスかどうかを判定する方法のメモです。

CSS

@media (any-hover:hover) {
}

例えば、こんな感じにつかえるかな？

@media (any-hover:hover) {
  transition: opacity .5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;

  &:hover{
    opacity: .7;
  }
}

hover関連のtransitionとhoverの指定は @media (any-hover:hover) で指定しちゃうのが吉かなと思います。

JavaScript

const isHover = window.matchMedia("(any-hover:hover)").matches;
if(isHover){
}

JavaScriptの場合はcssをほぼそのままですね。
判定用のトリガーつくってあとはifでやっちゃうといいと思います。

const isHover = window.matchMedia("(any-hover:hover)").matches
if(isHover){
  elm.onclick = () => {
    if(elm.classList.contains('is-active')) elm.style.height = '100px'
    else elm.style.height = ''
    elm.classList.toggle('is-active')
  }
}

簡易的ですが、こういうイメージです。ホントはスマホとの判定で window.matchMedia(‘(min-width: 768px)’).matches をうまくつかってください。
hoverが使えないデバイスのときは、タップでプルダウンを表示させるみたいなイメージですね。

タブレットで見る方がこれから増えていくと思うので頭の霞にでもおいても損はないかなと思います。