下拉悬停不会保持静止

Posted 2023-05-08

【中文标题】下拉悬停不会保持静止

【英文标题】：Dropdown hover doesn't stay still

【发布时间】：2018-03-03 03:20:40

【问题描述】：

我试图让这个下拉菜单出现在一个固定的顶部栏中。 我浏览了很多教程和论坛，但没有任何帮助。

我不能：

当我将光标从“Trabalhos”按钮移开时，使下拉菜单保持静止。 当子菜单显示时，使顶部栏元素静止 - “Contato”按钮离开栏，就好像它是浮动的一样。

Here is the code in CSSDesk（请隐藏 html/css 侧边栏，以便您看到主要问题：当光标经过“Trabalhos”按钮时，许多开/关悬停闪烁）。

我才刚开始，如果我的代码乱七八糟，我很抱歉（如果确实如此，请告诉我！）

#fixtop 
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  position: relative;


#fixtop>ul 
  margin: 10px auto;
  color: white;
  font-size: 1.5em;
  display: table;
  list-style: none;


#fixtop>ul>li 
  padding: 0 90px 0 90px;
  cursor: default;
  transition: 0.2s;
  float: left;


#fixtop>ul>li>a:hover 
  color: yellow;
  transition: 0.2s;


#topbuttons #bottrab:hover~#submenu 
  display: table;


/*SUBMENU AREA*/

#submenu 
  position: relative;
  display: none;


#submenu>a 
  padding: 10px;
  position: relative;
  top: 50px;
  width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 3;
  border-radius: 2px;


#submenu>nav>a:hover 
  background: rgba(0, 0, 0, 0.7);
  transition: 0.2s;

<header id="fixtop">
  <ul id="topbuttons">
    <li><a href="#">Sobre mim</a></li>
    <li><a href="#" id="bottrab">Trabalhos</a>
      <div id="submenu">
        <a href="#">Manipulação de imagem</a>
        <a href="#">Diagramação</a>
        <a href="#">Programação Web</a>
        <a href="#">Design de logo</a>
      </div>
    </li>
    <li><a href="#">Contato</a></li>
  </ul>
</header>

【参考方案1】：

由于子菜单是主菜单元素的子菜单，因此它会在主菜单元素出现时扩大其大小。因此，菜单项从鼠标光标移开。完成后，子菜单关闭，主菜单项移回鼠标光标下。这个循环会导致悬停和非悬停状态之间的振动。

一种解决方案是将子菜单设置为position:absolute，以便将其从文档流中删除。但这也意味着主菜单项的悬停区域将不包括子菜单的区域，因此当鼠标离开主菜单项时子菜单会关闭。为了解决这个问题，我在 #submenu 元素本身上添加了另一个 :hover 定义。

#submenu 
  position: absolute;
  display: none;


#topbuttons #bottrab:hover~#submenu,
#submenu:hover 
  display: table;

下面的工作示例：

#fixtop 
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  position: relative;


#fixtop ul 
  padding: 0;
  margin: 10px 0;
  color: white;
  font-size: 1.2em;
  display: table;
  list-style: none;


#fixtop ul li 
  padding: 0 20px;
  cursor: default;
  transition: 0.2s;
  float: left;


#fixtop ul li>a:hover 
  color: yellow;
  transition: 0.2s;


#topbuttons #bottrab:hover~#submenu,
#submenu:hover 
  display: table;



/*SUBMENU AREA*/

#submenu 
  position: absolute;
  display: none;


#submenu a 
  padding: 10px;
  position: relative;
  top: 18px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 3;
  border-radius: 2px;


#submenu a:hover 
  background: rgba(0, 0, 0, 0.7);
  transition: 0.2s;

<header id="fixtop">
  <ul id="topbuttons">
    <li><a href="#">Sobre mim</a></li>
    <li><a href="#" id="bottrab">Trabalhos</a>
      <div id="submenu">
        <a href="#">Manipulação de imagem</a>
        <a href="#">Diagramação</a>
        <a href="#">Programação Web</a>
        <a href="#">Design de logo</a>
      </div>
    </li>
    <li><a href="#">Contato</a></li>
  </ul>
</header>

【讨论】：

非常感谢！！！！！！！你能帮我做点别的吗？我正在尝试在下拉菜单上进行基本的淡入淡出转换，但是当我使用转换或转换延迟时什么都没有发生。谢谢你的一切=)

我能看看你到目前为止得到了什么吗？这是one method 使用opacity 和visibility 和transition-delay。