JavaScriptを使用してホバー時のCSSを変更する方法

1. CSSの:hoverセレクタを使用する方法: CSSの:hoverセレクタを使用すると、要素がホバーされたときに適用されるスタイルを定義できます。以下は例です。

   .hover-element:hover {
    /* ホバー時のスタイルをここに定義 */
   }

2. JavaScriptを使用してクラスを切り替える方法: JavaScriptを使用して、ホバー時に要素にクラスを追加または削除することもできます。以下は例です。

   <div id="hover-element" onmouseover="addHoverClass()" onmouseout="removeHoverClass()">要素</div>
   <script>
   function addHoverClass() {
    document.getElementById("hover-element").classList.add("hovered");
   }
   function removeHoverClass() {
    document.getElementById("hover-element").classList.remove("hovered");
   }
   </script>
   <style>
   .hovered {
    /* ホバー時のスタイルをここに定義 */
   }
   </style>

3. JavaScriptを使用してスタイルを直接変更する方法: JavaScriptを使用して、ホバー時に要素のスタイルを直接変更することもできます。以下は例です。

   <div id="hover-element" onmouseover="changeStyle(true)" onmouseout="changeStyle(false)">要素</div>
   <script>
   function changeStyle(hover) {
    var element = document.getElementById("hover-element");
    if (hover) {
      element.style.color = "red";
      element.style.backgroundColor = "yellow";
    } else {
      element.style.color = "black";
      element.style.backgroundColor = "white";
    }
   }
   </script>

これらの方法を使用すると、要素のホバー時のスタイルを自由に変更できます。適用したいスタイルに応じて、適切な方法を選択してください。