Hello I am new to HTML and CSS, and I was trying to display the contents of a div element when I hover over a li element. So basically what I am trying to do is when I hover over one li element (say: ls1), I want to display dv2. However, my code does not display the contents even when I hover over it. Please help!! Thank you.
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>