Hola, soy nuevo en HTML y CSS, y estaba tratando de mostrar el contenido de un elemento div cuando paso el mouse sobre un elemento li. Entonces, básicamente, lo que estoy tratando de hacer es cuando paso el mouse sobre un elemento li (digamos: ls1), quiero mostrar dv2. Sin embargo, mi código no muestra el contenido incluso cuando paso el mouse sobre él. ¡¡Por favor ayuda!! Gracias.
const list_dv1 = document.querySelectorAll('.dv1 li'); function show_item() { list_dv1.forEach((item) => item.classList.remove('hovered')); this.classList.add('hovered'); } list_dv1.forEach((item) => item.addEventListener('mouseover', show_item)); * { margin: 0; padding: 0; box-sizing: border-box; } .main { position: relative; background-color: black; height: 100vh; width: 100%; } .dv1 { background-color: yellow; cursor: pointer; } .dv1 li:hover { transform: scale(1.2); } ul { list-style-type: none; display: flex; } li { margin: 20px; } .dv2 { background-color: greenyellow; color: black; } .dv2 { display: none; } .ls1:hover+.dv2 { display: block; } .dv3 { background-color: yellowgreen; color: black; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Practice Hiding Elements</title> </head> <body> <div class="main"> <div class="dv1"> <ul> <li class="ls1">Hover over me once</li> <li class="ls2">Hover over me twice</li> </ul> </div> <div class="dv2">You found me!</div> <div class="dv3">You found me twice!</div> </div> </body> </html>