js スマホでタップ（click）後にCSSを変えたい（@media (hover: hover) {}）

js スマホでタップ（click）後にCSSを変えたい（@media (hover: hover) {}）
PCだと問題ないけどスマホだと不思議な挙動になる

状況

• ボタンがある
• ボタンには「.xxx:hover{color:red;}」みたいな感じのCSSを設定
• ボタンクリックでclassを追加して色変更
• PCだと問題無いけど、スマホだとボタンタップ後、別の場所をタップしないと色が変わらない

結局、解決せず

確認内容

スマホとPCを繋いで確認

JS AndroidでのJavascript処理をデバッグしたい（Chrome）

とくにエラーはでていないし、ステップ実行しながら確認してもエラーにはならない

scriptの修正

▼もとのソースはこんな感じ

if (***) {
  $(***).removeClass(***).html(***);
}
else {
  $(***).addClass(***).html(***);
}

click

たぶんタップ後、解除がされていないんだろうってコトでblur()を試すか悩んだ

▼関係のないトコをタップしたら動くならclick()イベントで強制的にしてみるがダメ

$(***).removeClass(***).html(***);
$(***).parents(***).click();

▼「trigger('click')」にしないとダメなの？ってコトで試すもダメ

$(***).removeClass(***).html(***);
$(***).parents(***).trigger('click');

touchend

スマホなんでclickよりtouchendとかのほうがいいの？ってことでtouchendにしてみる

▼関係ないトコをタッチさせてみるもダメ

$(***).removeClass(***).html(***);
$(***).parents(***).trigger('touchstart');
$(***).parents(***).trigger('touchend');

blur()

click()がダメならblur()を試す

▼hoverならフォーカス解除すればよくね？って感じでblur()。でもダメ。

$(***).blur();
$(***).removeClass(***).html(***);

▼順番を逆にしてもダメ

$(***).removeClass(***).html(***);
$(***).blur();

▼まさか「blur()」じゃなく「trigger('blur')」と思ったけど変わらず

$(***).removeClass(***).html(***);
$(***).trigger('blur');

mouseoutとかも試すもダメ。

innerHTML

まさか「html()」が悪さしてる？と推測するも関係ない感じ

$(***).removeClass(***);
$(***)[0] = innerHtml(***);

hover

hoverが原因？と推測
cssから「:hover{}」を削除して実行すると成功する

ということで「スマホでは :hover{}を使わない」と考えるも「PCとスマホを横幅で判断する」ってのはしたくない
で、さらに調べるとメディアクエリに良いのがいるっぽい

@media (hover: hover) {}

▼こんな感じ

@media (hover: none) { # hoverが使えない端末
  ～～～～
}
@media (hover: hover) { # hoverが使える端末
  ～～～～
}

サンプル: css

@mixin hover {
  @media (hover: none) {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    &:active {
      color: #959799;
    }
  }

  @media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
    &:hover {
      color: #959799;
    }
  }
}

サンプル: sass

@mixin hover {
  @media (hover: none) {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    &:active {
      @content;
    }
  }

  @media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
    &:hover {
      @content;
    }
  }
}

.xxxx {
  @include hover {
    color: #959799;
  }
}

PCでは動かない:バグ？

PCも「@media (hover: none) {}」の中に入っていることに気づいた

調べると下記の何かにたどり着いた
Issue 441613: @media (hover: none) should be false on a traditional desktop/laptop computer

バグ解消したとあったけど「Mon, Aug 23, 2021, 6:24 AM GMT+9」のタイミングで再発した？的なコトが記載されている

ひとまず、挫折