前提・実現したいこと

CSSのhover状態をJavaScriptで解除したいのですが、
例えば、ボタン1があったとして、
ボタン1をhoverして押した状態から5秒後にhover解除された状態にしたいです
どういった方法がありますか
removeClass()以外でお願いします

Lhankor_Mhy

2020/05/17 00:44

「hover解除された状態」とは、具体的にはどのようなものですか？ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

think49

2020/05/17 10:12

> removeClass()以外でお願いします classでないなら、element.setAttribute('data-hover-enab', true) は有なのでしょうか。なぜなぜ分析をしないと、妥当性を判断できません。

行動規範の内容に同意します

回答2件

情報が不足しているのでなんとも言えませんが、予想で回答を書くと、もしかしてこういうことでしょうか？
サンプル

js
1target.addEventListener('click',e => 
2  setTimeout(() => 
3    e.target.style.pointerEvents = "none"
4  , 5000);
5});

投稿2020/05/17 01:21

Lhankor_Mhy

総合スコア36981

AkitoshiManabe

2020/05/17 01:23

> 情報が不足しているのでなんとも言えませんそうですよね。概論しか回答できませんでした。

行動規範の内容に同意します

CSSのhover状態をJavaScriptで解除したい

（略）

どういった方法がありますか

removeClass()以外でお願いします

pure javascript

.removeClass() はjQuery固有のAPIと思いますので、jQueryが使えない条件下ですと pure javascript （Element.classList.remove()）を使うのが手っ取り早いです。

CSSプリプロセッサを活用して作業時間の短縮を図る開発環境下では、マークアップ文書中の多くのタグに決め打ちされたclass名が散在するため、簡単に実現できます。

スタイルシートオブジェクト

MDN CSS Object Model にも多数のAPIが示されていますが、link[rel=stylesheet] や style で適用される内容を、documentオブジェクト下(document.styleSheets)でCSSRuleListを取得し、セレクタに疑似クラス(:hover) が設定された CSSRuleを書き換える手法です。
現在は一般的ではありませんし、車輪（簡単に利用できるライブラリ）の開発を行う必要があると思います。

HTML4 + CSS2.1 時代はマークアップ文書に id も class も極力書かない風潮があり、「HTMLはそのままに、適用されるスタイルを、CSSファイルレベルで切り替える」手法として、利用されたこともありました。現在でも、趣味の範囲なら、こうしたマニアックな手法は面白いかもしれません。

投稿2020/05/17 01:21

AkitoshiManabe

総合スコア5434

miyabi_pudding

2020/05/17 02:22 編集

今でも、ネイティブで、擬似要素に対して動的にスタイル当てる時なんかは、CSSRule技使ったりしますけどね。ただし、CSSの外部ファイル追加できない（提供されたものの元に手を加えられない案件）という限定された条件ですけどね　汗クラスでスタイル切り替えた方がいいですし、その方が早い。ようはめったにないw あとはライブラリ自作の時に、インナースタイル変更より弱めのスタイル当てたい時とか。まぁ、そう考えると、おっしゃる通り趣味のレベルなのは間違いないですよね　汗

AkitoshiManabe

2020/05/17 08:40

HTML4 + CSS2.1 時代は、実用面でISDN環境の利用者（ナローバンドのユーザ）も考慮する時代でしたかねぇ。レイテンシを小さくするため、マークアップ文書での id, class 付与を最小限に押さえ、ブラウザにキャッシュすることを前提でCSSファイル側を太らせる。通信環境の進化で開発手法も変わったと感じます。

miyabi_pudding

2020/05/17 08:47

まったくです。今だと逆に、クラス多用した方が実質レンダリング速度上がるって事実が発覚して、トレンドな書き方変わりつつありますしね・・・。 5Gで、またいろいろと変わっちゃう気がします。と、本件に逸れたコメント続きになってしまい失礼しました　汗

行動規範の内容に同意します

あなたの回答