JavaScript マウスアウト時のトグル処理を追加したい

Question

（初心者のため、説明が不明瞭と思います。すみません。）
divタグからマウスアウトしたら、クラスpurpleをトグルしたいです。

いくつかサイトを見て、下記まで書きました。
マウスアウト時の指定の仕方が分かりませんでした。。
アドバイスいただけますと幸いです。

現状、下記エラーも出てしまします。。
Uncaught TypeError: all.addEventListener is not a function
at HTMLDocument.

<div class="blog-post purple">
        <h1>大阪</h1>
        <p>あべのハルカスへ行きます!</p>
      </div>
<div class="blog-post purple">
        <h1>青森</h1>
        <p>八甲田山へ行きます!</p>
      </div>

{
  const all = document.querySelectorAll('.blog-post');
  all.addEventListener('mouseout', () => {
  all.classList.toggle('purple');
　});

.purple {
  background-color: rebeccapurple;
}

Comments

[yambejp]

最初はpurpleクラスを持っていて、一度hoverして外したらpurpleが消えるのでしょうか？
mouseoutするたびにつけたり消したりする？

[hiro_ike]

ありがとうございました。
現状ので、大丈夫です！！

Answer 1

document.querySelectorAll('.blog-post').forEach(x=>{
  x.addEventListener('mouseout', () => {
    x.classList.toggle('purple');
  });
});

Answer 2

querySelectorAll()で取得するのは HTMLCollection なので、ループで一つずつ処理してやる必要があります。

for (let i=0 ; i<all.length; i++) {
   all[i].addEventListener('mouseout' // 処理
}