Javascript 如何在MouseOver上显示和隐藏另一个div

现在我在菜单下有4个div

我正在尝试制作一个小的覆盖图，当您将鼠标悬停在menubut类上时显示。我还试图让另一个名为red的div在我将鼠标悬停在div最左边的类上时显示，该div的大小约为menubut的十分之一

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

[红色菜单栏]/<同时更改菜单栏的背景色

我对Javascript相当陌生，所以我不确定如何开始使用它

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

---

如果我能提供更多的信息，请让我知道。谢谢

这是一个简单的例子，使用jQuery可以更高效地完成它。您应该了解这个工具

在本例中，如果您将鼠标悬停在小部件上方，它将变为蓝色；如果您将鼠标悬停在常规菜单栏上，它将按您选择的样式悬停

Html:

---

你问什么不太清楚。如果希望某个元素在悬停时更改样式，可以像以前一样使用：hover。如果希望在将鼠标悬停在b上时更改元素a，则可以使用onmouseover事件。也许是这样的@我刚刚编辑了上面的Zivweisman，如果它现在有意义的话。我有一个名为menubut的div，在这个div中，我想在最左边放一个名为red的div

.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;
}

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

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

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