jquery - 在定位的 div 中从右侧悬停滑动 div

Question

我有以下情况： 一个居中的 Div 层包含内容。在右下角，有一个定位的 div (bottom: 0, right: 0)，它有两个元素，一个链接和一个链接列表。链接列表应该被隐藏。当您将链接悬停时，它应该向左移动并且链接列表应该滑入。我如何做到这一点：

CSS：

#page {
 position: relative;
} 
#linkholder {
 position: absolute;
 bottom: 10px;
 right: 0px;
}
#link {
 display: inline-block;
}
#linklist {
 display: none;
}

HTML：

<div id="page">
  content
  <div id="linkholder">
    <div id="link">Link</div>
    <div id="linklist">LINKS TO SLIDE IN WHEN HOVER LINK</div>
  </div>
</div>

Answer 1

你可以通过 CSS 转换来做到这一点。这可能看起来像这样：

#linklist {
    /* Set the animation and speed */
    /*general version*/
    transition: all 5s;
    /*browser specific versions*/
    -moz-transition: all 5s;
    -ms-transition: all 5s;
    -webkit-transition: all 5s;
    -o-transition: all 5s;
}
#linklist.hidden {
    /* Have it translated off the screen first*/
    -webkit-transform: translate(100px, 0);
    -moz-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    -o-transform: translate(100px, 0);
    transform: translate(100px, 0);
}

然后，您在 javascript 中进行回调，当悬停在 #link 上时为 #linklist 设置类。

var event = function () {
    document.getElementById('linklist').className = '';
    this.removeEventListener('mouseover', event);
};
document.getElementById('link').addEventListener('mouseover', event, true);

JS 小提琴：http: //jsfiddle.net/XWReQ/