javascript - 如何在另一个 div 之上显示和隐藏一个 div onMouseOver

Question

所以现在我在“menubut”类下有 4 个 div

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

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

[(red) Menubut ]//<同时改变Menubut的背景色。

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

我的每个 css 看起来像这样:

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

如果我可以提供更多信息，请告诉我。谢谢

Answer 1

这是一个简单的示例，使用 jQuery 可以更有效地完成它(您应该了解这个工具)

在此示例中，如果您将鼠标悬停在小部分上方，它会将颜色更改为蓝色，如果您将鼠标悬停在“常规”菜单上，它会根据您选择的样式悬停。

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