将鼠标悬停在特定元素上时如何显示/隐藏

Question

我做了一个辅助菜单，我喜欢当用户将鼠标悬停在特定的主菜单项上时显示该菜单。

我尝试了这段代码，但是没有用...

 .second-menu {display:none} ul li #2:hover + .second-menu {display:block} 

 <ul> <li id="1">first</li> <li id="2">second</li> <li id="3">third</li> <ul> <div class="second-menu"> <ul> <li>page1</li> <li>page2</li> <li>page3</li> </ul> </div> 

有什么建议吗？...只能通过CSS或javascript ....

Answer 1

 .second-menu{ display:none; } li:hover >.second-menu{ display:block; } 

 <ul> <li id="1">first</li> <li id="2">second <ul class="second-menu"> <li>page1</li> <li>page2</li> <li>page3</li> </ul> </li> <li id="3">third</li> <ul> 

Answer 2

如果要使用CSS，则必须将子菜单放在要悬停的元素内。

对于CSS，C.Raf.T的答案是完美的。

如果出于某种原因您想使用javascript，则可以执行以下操作

document.getElementById('2').addEventListener('mouseenter', function ()
{
  document.getElementById('subMenu').style.display = "block";
});
document.getElementById('2').addEventListener('mouseleave', function ()
{
  document.getElementById('subMenu').style.display = "none";
});

注意：以上代码要求您向包含菜单的div中添加一个“ subMenu” ID。 如果您希望仅通过一个悬停事件显示serval菜单，请改用一个类。

但老实说，如果您需要的只是嵌套子菜单，那么CSS答案是最好的选择。 如果子菜单必须在父菜单之外，则需要使用javascript。

Answer 3

通过使用纯CSS，您必须确保子菜单（ .second-menu ）是悬停的HTML元素的子节点。 因为不幸的是CSS不知道父选择器。

通过使用JS，您将更加灵活。 表示将子菜单放置在任意位置。

 * { margin: 0; padding: 0; } .second-menu {display:none; border: 1px solid blue; width: 100%; position: absolute; left: 0; right: 0; } ul li#two:hover > .second-menu {display:block} .relative { position: relative; border: 1px solid black; } li { display: inline-block; } 

 <ul class="relative"> <li id="one">first</li> <li id="two">second <ul class="second-menu"> <li>page1</li> <li>page2</li> <li>page3</li> </ul> </li> <li id="three">third</li> <ul> 

Answer 4

使用Javascript回答，

 document.getElementById('hover').onmouseover = function(){ document.getElementById('second-menu').style.display = 'block'; } document.getElementById('hover').onmouseout = function(){ document.getElementById('second-menu').style.display = 'none'; } 

 .second-menu{ display:none; } 

 <ul id="hover"> <li id="1">first</li> <li id="2">second</li> <li id="3">third</li> <ul> <div class="second-menu" id="second-menu"> <ul> <li>page1</li> <li>page2</li> <li>page3</li> </ul> </div> 

这是一个小提琴