How to make selected div on hover to change css property-CodePudding

I need little help, I'm new to JavaScript. I'm not sure how to fix the bug, currently, the code on hover is making the first box to display the title. But I want the title to be shown only on the chosen box. I thought in the for loop, the boxes[i] will make his first className[0] to display flex, but I guess it doesn't work that way. How can I fix this?

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 >
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" />
                  <span >
                      <span >Title</span>
                 </span>
              </div>
              <div >
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" />
                  <span >
                      <span >Title</span>
                 </span>
              </div>
            </div>

CodePudding user response：

Not sure why you want to use JS, but it can be done with pure CSS. You just need to target the title box when someone hovers the content box as below

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

Working Code

.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 >
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU"  />
    <span >
                      <span >Title</span>
    </span>
  </div>
  <div >
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU"  />
    <span >
                      <span >Title</span>
    </span>
  </div>
</div>