如何在悬停时选择div来更改css属性

Question

我不需要什么帮助，我是JavaScript新手。我不知道如何修复这个错误，目前，悬停时的代码正在制作第一个显示标题的框。但我希望标题只显示在选定的框中。我想在for循环中，boxes[I]会使他的第一个className[0]显示flex，但我想它不起作用。我该怎么解决这个问题？

var boxes = document.getElementsByClassName("portfolio-content-box");
for(var i = 0; i < boxes.length; i ++){
boxes[i].addEventListener("mouseover", function(){
document.getElementsByClassName("portfolio-content-title-box")[0].style.display = "flex";
})
}

.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left:2px solid red;
cursor:pointer;
transition:0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top:0;
left:0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0,0,0,1);
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>

Answer 1

不确定为什么要使用JS，但可以使用纯CSS。当有人将内容框悬停在下方时，您只需要将标题框作为目标即可

.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}

工作代码

.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left: 2px solid red;
cursor: pointer;
transition: 0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top: 0;
left: 0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}

<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>