When hovering, I want the opacity to be set at "0.3"; when not hovering, it should be set at "1". Additionally, the color of h2 and h3 in each div should transition from white to red.
I have searched extensively online and tried to solve this issue, but as a beginner, I am struggling to understand. The solution I attempted only works for the first div - why doesn't it work for the others?
I am aware that using classes would allow me to achieve this with CSS alone, but I want to incorporate more functions for h2 and h3 within each div. For example, on hover, h2 and h3 display transitions from none to block, or their color shifts from white to red.
Here is the link to view the code on CodePen: the code on pen
Below is the HTML code:
<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">
<title>Document</title>
</head>
<body>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
</body>
</html>
CSS
#box{
background: blue;
width:100px;
height: 100px;
margin: 20px;
}
JavaScript
function hover() {
document.getElementById("box").style.opacity = "0.3";
}
function nohover() {
document.getElementById("box").style.opacity = "1";
}