为什么mouseover和moveout不适用于所有具有相同名称的类？

-1

我想在鼠标悬停期间应用classList.add，并在mouseout期间应用classList.remove。应该添加或删除的类是“.portraitBG”。它有一个＃32353F的背景。为什么mouseover和moveout不适用于所有具有相同名称的类？

我不知道为什么这不起作用，当我告诉代码将这个函数应用到我的所有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; 
      }

来源

2017-05-30 agccaesar

ahh，现在问题很明显......'portrait'是一个元素列表，你不能将一个事件监听器添加到元素列表中，并且如果你使用** developer **工具控制台，你会看到问题 –

我尝试用开发人员工具控制台找出解决方案。由于几个小时后我找不到方法，我决定在Stackoverflow上寻找一些帮助。我是新开发人员，所以如果你能帮助我，我会成为毕业生。最好的问候 – agccaesar

你想在mouseover期间添加背景，并在mouseout时删除背景吗？ – PenAndPapers

更好地做到这一点在CSS

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

来源

2017-05-30 05:39:30 PenAndPapers

为什么mouseover和moveout不适用于所有具有相同名称的类？

回答

相关问题