cssとjQueryで同じことができる時の選択（例:hover等）

Question

現在jQueryを勉強しています。
先にHTMLとCSSを少し勉強した際、マウスホバー時の色変更などはcssを用いていたのですが、jQueryでもhoverというのが出てきました。
調べてみて、:activeやtransition等、他にも同じことができるものが、いくつもあることを知りました。
そこで質問ですが、hoverのように同じ効果が得られる場合、cssとjQueryの使い分けは、どうしたら良いのでしょうか？
それぞれを使う状況やメリットを教えていただけますと幸いです。よろしくお願い致します。

Answer 1

jQuery は transition が実装される前の時代からあり、そのときは必要だった機能も含んでいます。

【Can I use... Support tables for HTML5, CSS3, etc】
https://caniuse.com/#feat=css-transitions

---

cssとjQueryの使い分け

「変化後に実行」の方法もあるので、基本的にCSSで書けるアニメーションは全てCSSで書いた上で、より複雑なプログラムが必要な場合にjQuery.hoverなどを使用すれば良いです。

【CSSでのアニメーション完了後にJavaScriptで処理を実行する | cly7796.net】
http://cly7796.net/wp/javascript/process-with-javascript-after-completing-css-animation/

Comments

[works_noname]

ご回答ありがとうございます。
各ブラウザ毎の対応を検索できるサイトや、後に悩みそうなことに関するサイトまで、ご丁寧にリンクを貼っていただき、とても嬉しいです。きちんと勉強させていただきます。
登場した際の前後関係などもあるのですね。
個人的にはCSSで一通りまとめた方が作業しやすいので、おっしゃる通りCSSでできるものはCSSを使用し、より複雑なものだけjQueryを使いたいと思います。
迅速なお返事を誠にありがとうございます。

Answer 2

考え方としてcssでできることは極力jsに依存しない方が環境依存が低いHTMLが書けます
ただcssもブラウザによって実装がバラバラなので、特定の古いブラウザ対応が必須なら
jQueryの方が汎用性があがります

Comments

[works_noname]

ご回答をありがとうございます。
古いブラウザですか……あまり古いブラウザに対応することは考慮していないので、できる限りCSSを使用した方が良いのですね。
今後はCSSで再現できない動きやシステムを導入する際だけjQueryを使いたいと思います。
端的にわかりやすいご説明をありがとうございます。