所以现在我在“menubut”类下有4个div。
我正在尝试制作一个小的叠加层,显示当您将鼠标悬停在menubut类上时。当我将鼠标悬停在div最左边的班级时,我还试图让另一个名为“红色”的div大约为menubut的十分之一。
[ Menubut ] //When Hovered over it should look like this
[(red) Menubut ]
//< at the same time changing the background color of 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;
}
如果我可以提供更多信息,请告诉我。谢谢
答案 0 :(得分:0)
这是一个简单的例子,使用jQuery可以提高效率(你应该学习这个工具)
在这个示例中,如果您将鼠标悬停在小部件上方,如果将鼠标悬停在&#34;常规&#34;上,则会将颜色更改为蓝色。 menubut,它将按你选择的风格徘徊。
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 = '';
}