Currently, I have 4 divs grouped under the class "menubut."
I am attempting to create a small overlay that appears when hovering over the menubut classes. Additionally, I want another div called "red" to show up about one-tenth of the size of the menubut when hovering over the leftmost class in the div.
[ Menubut ] //The appearance when hovered over should resemble this
[(red) Menubut ] //
, simultaneously changing the background color of Menubut.I'm relatively new to Javascript and unsure how to begin with this task.
<div class = "menubut">
<div class = "red"></div>
</div>
<div class = "menubut">
<div class = "red"></div>
</div>
<div class = "menubut">
<div class = "red"></div>
</div>
<div class = "menubut">
<div class = "red"></div>
</div>
The CSS for each element is as follows:
.menubut
{
width: 90px;
padding-left: 23px;
padding-top: 5px;
}
.menubut:hover
{
background-color: rgba(0, 0, 255, 0.2);
}
.red
{
position: absolute;
background-color: red;
width: 15px; height: 15px;
}
If you need more information, please feel free to ask. Thank you.