【JavaScript】toggleの使い方

質問

id="color"を付けた<p>タグで以下のような記述をしてみました。
マウスオーバーをすれば、上記の<p>タグの色は赤に変わり、マウスをはずすと
色が元の色（black）に戻ります。
うまくはいきましたが冗長に感じます。

classListを使ってtoggleをつけた練習をしたことはあります。

このようなケースで"toggle"を使ってマウスオーバーをした時にはテキストは赤色、はずすと元の色(black)になるように簡潔に記述する方法はあります？

超初心者です。簡潔に記述する方法があれば教えて下さい。宜しくお願いします。

(HTML)
<p>こんにちは。こんにちは。こんにちは。</p>
<p id="color">こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。</p>
----------------------------------------------------
(JavaScript)
document.getElementById("color").addEventListener("mouseover", () => {
document.getElementById("color").style.color = "red";
});

document.getElementById("color").addEventListener("mouseout", () => {
document.getElementById("color").style.color = "black";
});

回答No.1

ngwaver · ベストアンサー

"toggle"を使う場合

(JavaScript)
document.getElementById("color").addEventListener("mouseover", () => {
document.getElementById("color").classList.toggle("hoverColor");
});

document.getElementById("color").addEventListener("mouseout", () => {
document.getElementById("color").classList.toggle("hoverColor");
});

(CSS)
.hoverColor {
color: red;
}
----------------------------------------------------------------------

"toggle"を使わなくて良いならもっと簡単に書けます。

(CSS)
#color:hover {
color: red;
}

お礼

ありがとうございました。

回答No.2

AsarKingChang

1番さんと同意見で。CSSでHOVER属性をつけた
オーバーライドを書けばそれで終わりで。
JavaScriptすらいらないと思います。