悬停时显示迷你菜单

Question

我有一些像这样的“媒体”div ......

当我将鼠标悬停在div上时，我想为一个小工具栏制作动画，所以它看起来像这样......

是否有一个JQuery控件“已经存在”已经这样做了，或者任何人都可以指出我如何做到这一点的方向？

Answer 1

你真的不需要这个javascript，它非常适合用于CSS。您可以将子元素显示在父级的悬停

上

演示： http://jsfiddle.net/yyans8c2/1/

HTML：

<div class="item">
    Item #1

    <div class="toolbar">toolbar</div>
</div>

<div class="item">
    Item #2

    <div class="toolbar">toolbar</div>
</div>

CSS：

.item {
    position: relative;
    margin: 0 0 10px;
    height: 50px;
    background-color: #EEE;
}

.toolbar {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;

    background-color: #DDD;
}

div.item:hover .toolbar {
    display: inline-block;
}

Answer 2

您可以使用.hover()和.animate()功能：

注意：也许您希望悬停后工具提示保持可见状态。在这种情况下，请注释以下行：

 //$(this).closest('.wrapper').find('.tooltip').stop().animate({'right': '-100px'}, 300, 'easeOutExpo');

＆＃13;

＆＃13;

$('.img-wrapper').hover(function() {
  $(this).closest('.wrapper').find('.tooltip').stop().animate({'right': '0'}, 300, 'easeOutExpo');
}, function() {
  //$(this).closest('.wrapper').find('.tooltip').stop().animate({'right': '-100px'}, 300, 'easeOutExpo');
});

＆＃13;

.wrapper {
  width: 500px;
  float: left;
  position: relative;
  border: 1px solid #333;
  overflow: hidden;
}

.img-wrapper {
  width: 64px;
  height: 64px;
  float: left;
  background-color: #333;
}

.text-wrapper {
  width: 420px;
  margin-left: 16px;
  float: left;
}

.tooltip {
  width: 100px;
  position: absolute;
  right: -100px;
  background-color: #777;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class="wrapper">
  <div class="img-wrapper">img</div>
  <div class="text-wrapper">
     <span>text</span>
  </div>
  <div class="tooltip">tooltip</div>
</div>

＆＃13;

＆＃13;

＆＃13;