同じ名前のすべてのクラスでmouseoverとmoveoutが機能しないのはなぜですか？

Question

私はmouseover中にclassList.addを適用しようとしていますが、mouseout中にclassList.removeを適用しようとしています。追加または削除すべきクラスは ".portraitBG"です。それは＃32353Fのバックグラウンドを持っています。

この関数がすべての私のhtmlクラス ".portrait.flex"に適用されるようにコードに指示すると、なぜこれが機能しないのかわかりません。私はこの時点でjQueryを使いたくありません。

https://codepen.io/gabrielacaesar/pen/Pmrpzm

私のJavascriptのコード全体を参照してください：

var portrait = document.querySelectorAll(".portrait.flex") 

    portrait.addEventListener("mouseover", function() { 
    portrait.classList.add("portraitBG"); 
    }); 

    portrait.addEventListener("mouseout", function() { 
    portrait.classList.remove("portraitBG"); 
    }); 

マイHTML：

<section class="container"> 
     <div class="portraits flex"> 
      <a class="portrait flex one" href="#" alt="Foto:"> 
       <img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png"> 
       <div class="portraitContent"> 
        <p class="portraitName"> 
         Eliseu Padilha 
        </p> 
        <p class="portraitGovernment"> 
         governo Michel Temer 
        </p> 
       </div> 
      </a> 

      <a class="portrait flex two" href="#"> 
       <img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png"> 
       <div class="portraitContent"> 
        <p class="portraitName"> 
         Eva Chiavon 
        </p> 
        <p class="portraitGovernment"> 
         governo Dilma Rousseff 
        </p> 
       </div> 
      </a> 

      <a class="portrait flex three" href="#"> 
       <img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png"> 
       <div class="portraitContent"> 
        <p class="portraitName"> 
         Jaques Wagner 
        </p> 
        <p class="portraitGovernment"> 
         governo Dilma Rousseff 
        </p> 
       </div> 
      </a> 
    </section> 

マイCSS：

  a { 
       text-decoration: none; 
       cursor: pointer; 
      } 

      .container { 
       padding: 0; 
       max-width: 1500px; 
       margin: 0 auto; 
      } 


      .flex { 
       display: flex; 
      } 

      .portraits { 
       flex-direction: row; 
       flex-wrap: wrap; 
       justify-content: space-between; 
       padding: 30px 80px; 
      } 

      .portrait { 
       max-width: 800px; 
       max-height: 340px; 
       flex-direction: column; 
       text-align: center; 
       padding-top: 30px; 
      } 

      .portraitBG { 
       background: #32353F; 
       border-radius: 5%; 
      } 

      .portrait img { 
       max-width: 800px; 
       max-height: 200px; 
      } 

      .portraitContent { 
       border: 3px #32353F solid; 
       border-radius: 5%; 
       background: #00EC85; 
      } 

      .portraitName { 
       font-size: 200%; 
       color: white; 
       padding-top: 7px; 
      } 

      .portraitGovernment { 
       font-size: 100%; 
       color: #32353F; 
       padding-bottom: 7px; 
      } 

Answer 1

CSSでそれを行うには、より良いを

.portrait:hover{ 
    background: #32353F; 
    border-radius: 5%; 
}