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/

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

1 个答案: