[英]How to show and hide a div onMouseOver on top of another div
所以现在我在“ 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;
}
如果我可以提供更多信息,请告诉我。 谢谢
这是一个简单的示例,可以使用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 = '';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.