仅限 CSS - 如何在按钮悬停时滑出菜单？答案

【问题标题】：CSS ONLY - how to slide out menu on button hover?仅限 CSS - 如何在按钮悬停时滑出菜单？
【发布时间】：2017-11-24 13:55:01
【问题描述】：

当我将鼠标悬停在按钮上时，我希望菜单滑出。不知何故，它仅在我将悬停效果添加到菜单本身而不是按钮时才有效。我在网上能找到的都是一样的（悬停效果附在应该滑出的菜单上，而不是按钮上）。我该如何实施？ jsfiddle：https://jsfiddle.net/codingcodingcoding/tuhug8x8/

html:

  <span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
  <nav id="navigation">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </nav>

css:

.icon:hover#navigation {
  left: 0;
}

.icon {
  left: 0px;
}

#navigation {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}

【问题讨论】：

标签： css hover onhover

【解决方案1】：

html

<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
  <nav id="navigation">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </nav>

css:

.icon:hover + #navigation {
  left: 0;
}

.icon {
  left: 0px;
}

#navigation {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}

在这里，我只添加了 + 选择器 olny。

【讨论】：

【解决方案2】：

如果您想保持当前的 HTML 结构如下所示，可以使用 + 或 ~ CSS 选择器：

.icon:hover + #navigation {
  left: 0;
}

.icon {
  left: 0px;
}

#navigation {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
  <ul>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
</nav>

你可以read more about

【讨论】：

@javascript2016 不客气 ;) 不要忘记您也可以使用 ~ 以同样的方式，只需替换 + ...，您也可以将答案标记为已接受 :)

【解决方案3】：

#navigation 应该是图标容器（在您的情况下是 span 元素）的 子元素，以便能够在悬停时选择它。您只需移动结束的span 标记，如下所示。

（我在 sn-p 中使用了图像而不是图标，但在小提琴中，您会看到图标：https://jsfiddle.net/qLy4g8sL/1/）

.icon {
  left: 0px;
}

#navigation {
  position: absolute;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}
.icon:hover #navigation {
  left: 0;
}

<span class="glyphicon glyphicon-home icon" style="font-size:40px;"><img src="http://placehold.it/50x50">
<nav id="navigation">
  <ul>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
</nav>
</span>

【讨论】：