Currently, I am working on creating a Tetris board using HTML. My goal is to illuminate the block each time it is hovered over. However, I have encountered an issue where the first div lights up both blocks, but the second one does not light up the first block as desired. How can I resolve this problem?
CSS :
div{
width: 200px;
height: 200px;
background-color: #0000ff;
margin: 0px;
}
#div1{
float:left;
height:600px;
}
#div2{
float:left;
width:200px;
}
#div1:hover + #div2{
background-color: #0082ff;
}
#div1:hover{
background-color: #0082ff;
}
#div2:hover ~ #div1{
background-color: #0082ff;
}
#div2:hover{
background-color: #0082ff;
}
HTML :
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Hover Test</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>