我在mouseover期间尝试在mouseover和classList.remove期间应用classList.add。应添加或删除的类是“.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;
}
答案 0 :(得分:1)
最好在CSS中执行
.portrait:hover{
background: #32353F;
border-radius: 5%;
}