Javascript 为什么鼠标悬停和移动不'；不适用于所有同名的类？

我正在尝试在鼠标悬停期间应用classList.add，在鼠标悬停期间应用classList.remove。应该添加或删除的类是“.bg”。它的背景是#32353F

当我告诉代码将此函数应用于我所有的html类“.trait.flex”时，我不知道为什么这不起作用。我现在不想使用jQuery

请参阅上的完整代码

我的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来做

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

---

啊，现在问题很明显<代码>纵向是一个元素列表，您不能将事件侦听器添加到元素列表中，如果您使用开发人员工具控制台，您会看到问题所在。我尝试使用开发人员工具控制台找到解决方案。因为几个小时后我找不到办法，所以我决定在Stackoverflow上寻求帮助。我是新来的开发者，所以如果你能帮我的话，我会是毕业生。最好的评价是你在鼠标移动过程中试图添加背景，而在鼠标移动时删除背景吗？没错，@PenAndPapers.OMG@PenAndPapers-你的评论让我意识到我的回答和评论是多么荒谬！！！：P

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