Question

当我将鼠标悬停在按钮上时，我希望菜单滑出。不知怎的，我只在将悬停效果添加到菜单本身而不是按钮时才起作用。我在网上找到的所有内容都是相同的（悬停效果附加到应该滑出的菜单，而不是按钮）。我该如何实现呢？ 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;
}

Answer 1

如果要保留当前的HTML结构，可以使用+或~CSS选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

你可以read more about

Answer 2

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。

Answer 3

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

（我在片段中使用了图片而非图标，但在小提琴中，您会看到图标：https://jsfiddle.net/qLy4g8sL/1/）

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: