如何在另一个div上显示和隐藏onMouseOver上的div

Question

So right now I have 4 divs under the class "menubut"

I am trying to make a small overlay that shows when you hover over the menubut classes. I am also trying to get another div named "red" about a tenth of the size of the menubut to show when I hover over the class on the far left of the div.

[          Menubut           ] //When Hovered over it should look like this

[(red) Menubut ] //< at the same time changing the background color of Menubut.

I'm fairly new to Javascript so I'm not to sure how I would get started on this.

        <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>

And my css for each looks like this:

.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 I can provide anymore info please let me know. Thank you

Answer 1

This is simple example, it can be done much more efficient with jQuery (you should learn about this tool)

In this example if you hover above the little part, it will change color to blue, if you hover on the "regular" menubut, it will hover by the style you selected.

Html:

<div class="menubut" id="menu1">
<div class="red" onmouseover="doSomething('menu1')" onmouseout="clearBackground('menu1')"></div>
</div>
<div class="menubut" id="menu2">
    <div class="red" onmouseover="doSomething('menu2')" onmouseout="clearBackground('menu2')"></div>
</div>
<div class="menubut" id="menu3">
    <div class="red" onmouseover="doSomething('menu3')" onmouseout="clearBackground('menu3')"></div>
</div>
<div class="menubut" id="menu4">
    <div class="red" onmouseover="doSomething('menu4')" onmouseout="clearBackground('menu4')"></div>
</div>

JS:

function doSomething(id) {
    var ele = document.getElementById(id);
    ele.style.backgroundColor = 'blue';
}

function clearBackground(id) {
    var ele = document.getElementById(id);
    ele.style.backgroundColor = '';
}

Working fiddle