Necesito un poco de ayuda, soy nuevo en JavaScript. No estoy seguro de cómo solucionar el error, actualmente, el código al pasar el mouse está creando el primer cuadro para mostrar el título. Pero quiero que el título se muestre solo en el cuadro elegido. Pensé en el ciclo for, las cajas[i] harán su primer className[0] para mostrar flex, pero supongo que no funciona de esa manera. ¿Cómo puedo arreglar esto?
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>No estoy seguro de por qué quiere usar JS , pero se puede hacer con CSS puro. Solo necesita apuntar al cuadro de título cuando alguien pasa el cursor sobre el cuadro de contenido como se muestra a continuación
.portfolio-content-box:hover>.portfolio-content-title-box { display: flex; }Código de trabajo
.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>