Looking to change the background of one div when hovering over a button in another div?
Hello, I have a task where I need to modify the background color of a specific div when a button below it is hovered over.
The setup involves having an image (a tshirt logo) displayed in a div. Below that, there are multiple colored buttons. The requirement is to change the background of the tshirt div when hovering over these buttons. I am struggling with this and open to solutions using JavaScript or CSS.
I found a resource which seemed helpful but unfortunately did not work for me: On a CSS hover event, can I change another div's styling?
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background:grey;
}
#shirt {
display: block;
}
#thumbnail1 {
display: block;
}
#thumbnail1:hover {
background:white;
}
#thumbnail1:hover > #shirt {
background:green;
}
input[type="button"] {
width: 9.090%;
height: 4.090%;
display:block;
float:left;
background:red;
}
</style>
</head>
<body>
<section>
<div align="center">
<img style=" margin-left:10px;float:left; background:grey;" src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/>
<div align="center" id="shirt">
<img style="float:none" src="http://www.dudermang.com/cfaulk/3pigs.png" alt="wpf" width="760"/>
<img style="float:right; background:grey;"src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/>
</div>
</div>
<div style="padding-top:40px;">
<?php
echo'<div id="thumbnail1"><input type="button" style="background:#002B7A"/> </div>';
// Remaining PHP echoes for other buttons...
?>
</div>
</section>
</body>
</html>