他們的方式來滑動一個div在css

Question

我試圖得到它，所以當你將鼠標懸停在<div>它會滑落5px，我寧願它在CSS中。 （如果可能的話）

<div>我想移動名稱是「tothetop」。

感謝您提前提供所有幫助！

Answer 1

對對象使用jquery和調用slidedown。這裏顯示

例如：http://api.jquery.com/slideDown/

，或者如果你只是想移動的東西，而不是顯示/隱藏，使用jQuery動畫

Answer 2

CSS3過渡將做的工作非常好！

LIVE DEMO

HTML：

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 

CSS：

.box{ 
    width:160px; 
    height:80px; 
    background:#f46; 
    float:left; 
    margin:5px; 
    border-radius:10px; 
    -webkit-transition: 0.4s; // you can use also 400ms if you want 
      transition: 0.4s; 
} 
.box:hover{ 
    margin-top:10px; 
} 

---

如果你想退卻到jQuery的：

jQuery LIVE DEMO

$('.box').on('mouseenter mouseleave', function(evt){ 
    var pos = evt.type=='mouseenter' ? 10 : 5 ; 
    $(this).stop().animate({marginTop : pos}, 500); 
}); 

^{（請始終確保動畫您在CSS爲你的元素已經定義的CSS屬性（在這個例子是margin））}

http://api.jquery.com/on/
http://api.jquery.com/stop/

Answer 3

試試這個：

HTML：

<div id="tothetop"> 
    this move down 5px 
</div> 

CSS：

#tothetop {position:relative} 
#tothetop:hover {top:5px} 

Answer 4

<style> 
    div:hover { 
    margin-top:15; 
    } 
</style> 

這個簡單的代碼將在div滑下15個像素，你的想法