Slide div從右側懸停在一個定位的div

Question

我有以下情況： 一個居中的div層保存內容。 在右下角，有一個定位的div (bottom: 0, right: 0)，包含兩個元素，一個鏈接和一個鏈接列表。鏈接列表應該隱藏。 當您將鼠標懸停在鏈接，應該leftly移動和鏈表應該在滑動 如何我做這個。

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/