如何在另一個div上顯示和隱藏onMouseOver上的div

Question

所以現在我在“ menubut”類下有4個div

我試圖做一個小的疊加層，當您將鼠標懸停在menubut類上時會顯示出來。 我還試圖獲得另一個名為“ red”的div，其大小約為菜單大小的十分之一，但要在將鼠標懸停在div最左側的類上時顯示。

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

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

我對Java語言還很陌生，所以我不確定該如何開始。

        <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 = '';
}

工作提琴