如何显示/隐藏悬停在特定的元素

How to show/hide when hover in/out on specific element

本文关键字：悬停 元素 隐藏 何显示 显示      更新时间：2023-09-26

我创建了一个辅助菜单，我希望当用户将鼠标悬停在某个主菜单项上时显示它....

我试过这个代码，但它没有工作…

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

如果你想使用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。如果您希望仅用一个悬停事件显示多个菜单，请使用类。

但是老实说，如果你只需要嵌套子菜单的话，CSS是最好的选择。如果子菜单必须在父菜单之外，则需要javascript。

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

使用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>

这里是小提琴

通过使用纯CSS，您必须确保子菜单(.second-menu)是悬停HTML-Element的子节点。因为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>

相关文章：