javascript - css/js 翻转打破多次翻转

Question

客户要求从页面顶部的社交媒体图标弹出两个鼠标悬停

这是dev上的页面: http://devjohnson.com/the-buzz 忽略丢失的图像和设计 - 它具有与实时相同的图像和头文件 - 它刚刚完全更新。

如果你看一下右上角，你可以看到如果你滚动 facebook 图标(除了定位)，它会按我们想要的那样工作。但是，如果我取消注释 Twitter 图标的完全相同的代码，它就会中断，Facebook 图标消失，而 Twitter 图标不会滚动。我们既需要翻车又需要正确定位。

如有任何帮助，我们将不胜感激。

谢谢 卡罗琳

Answer 1

这是您的开始!

$('#clickable_div').mouseover(function() {
  $('#nav_menu').slideDown();
})
$('#wrap').mouseleave(function() {
  $('#nav_menu').slideUp();
});

#clickable_div {
  width: 100px;
  height: 25px;
}
* {
  margin: 0;
  padding: 0
}
#nav_menu {
  width: 100px;
  height: auto;
  background-color:#fff; 
  border:1px solid red;
  display: none;
}
#wrap {
  width: 100px
}
.fb {
  background-image: url("http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png");
  background-repeat: no-repeat;
}

<div id='wrap'>
  <div id="clickable_div" class="fb">&nbsp;</div>
  <div id="nav_menu">
    <ul>
      <li id="l1">AAAAA</li>
      <li>BBBBB</li>
      <li>CCCCC</li>
      <li>DDDDD</li>
    </ul>
  </div>
</div>