html - 鼠标悬停在菜单按钮外显示菜单

Question

我在使用导航菜单时遇到问题。将鼠标悬停在按钮外时，我试图停止显示菜单。正如您在代码片段中看到的那样，当将光标移动到按钮的左侧时，菜单会显示出来，而不是当光标位于我想要实现的按钮上方时显示菜单。

非常感谢您的帮助。

这是片段:

#btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: static;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#btn-holder > .button {
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  padding: 18px 2px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  left: 14;
  bottom: 0;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .4;
  border-radius: 3px;
}

#btn-holder > .button:hover {
  background-color: #732878;
  color: white;
}

#btn-holder > .menu {
  opacity: 0;
  transition: opacity .5s;
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 59px;
  bottom: -300px;
  font-family: 'Source Sans Pro', sans-serif;

    
}

.menu a {
    display: block;
    color: white;
    text-align: center;
    padding: 8px 13px;
    text-decoration: none;
    font-family:'Source Sans Pro', sans-serif;
    position:sticky;
   
}

.menu a:hover {
  background-color: #732878;
}

.menu > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.menu p {
  margin: 0;
}

.menu p:after {
    content:"";
    display: block;
    height: 1px;
    vertical-align: bottom;
    border-top: 1px solid #eee;
}

#btn-holder > .button:hover + .menu {
  opacity: .8;
  transistion-delay: 1s;
}

#btn-holder .menu:hover {
  opacity: .8;
  
}

<div id="btn-holder">
  <div class="button">
    <img class="menu" src="http://static.tumblr.com/e2rgcy1/WhRod5hpn/open.png"></a>
  </div>
  <div class="menu">
    <ul>
     <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
        
      <li><a href="/games"onclick="window.open(this.href, 'mywin', 
          'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
        
      <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
        
      <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
        
      <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
        
      <li><a href="/"><img class="tc" src="https://secure.static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
        
      <li><a href="/"><img class="refresh" src="https://secure.static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></a></li>
        
    </ul>
  </div>
</div>

Answer 1

您将鼠标悬停在隐藏的元素上，这就是为什么它看起来必须将其移出窗口并将其悬停在您希望它出现的位置

#btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: static;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#btn-holder > .button {
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  padding: 18px 2px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  left: 14;
  bottom: 0;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .4;
  border-radius: 3px;
}

#btn-holder > .button:hover {
  background-color: #732878;
  color: white;
}

#btn-holder > .menu {
  opacity: 0;
  transition: opacity .5s;
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: -100px;
  bottom: -500px;
  font-family: 'Source Sans Pro', sans-serif;
  transition: 0.5s;
}

.menu a {
    display: block;
    color: white;
    text-align: center;
    padding: 8px 13px;
    text-decoration: none;
    font-family:'Source Sans Pro', sans-serif;
    position:sticky;
   
}

.menu a:hover {
  background-color: #732878;
}

.menu > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.menu p {
  margin: 0;
}

.menu p:after {
    content:"";
    display: block;
    height: 1px;
    vertical-align: bottom;
    border-top: 1px solid #eee;
}

#btn-holder > .button:hover + .menu {
  opacity: .8;
  left: 59px;
}

#btn-holder .menu:hover {
  opacity: .8;
  left: 59px;
}

<div id="btn-holder">
  <div class="button">
    <img class="menu" src="http://static.tumblr.com/e2rgcy1/WhRod5hpn/open.png"></a>
  </div>
  <div class="menu">
    <ul>
     <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
        
      <li><a href="/games"onclick="window.open(this.href, 'mywin', 
          'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
        
      <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
        
      <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
        
      <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
        
      <li><a href="/"><img class="tc" src="https://secure.static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
        
      <li><a href="/"><img class="refresh" src="https://secure.static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></a></li>
        
    </ul>
  </div>
</div>