懸停時滑塊元素OUT

我有一個信息框疊加在它上面的圖像，下面發佈css。懸停時滑塊元素OUT

正常情況下，將鼠標懸停在圖像上時會出現這種情況，但是，我想要的是相反的。懸停圖像時，我希望該框可以向外/向下滑動約-50像素。有人得到這個小費？

.imgTitleInfoTop { 
    -moz-box-sizing: border-box; 
    bottom: 0; 
    font-size: 24px; 
    font-weight: 500; 
    height: 60px; 
    line-height: 22px; 
    width: 370px; 
}

來源

2013-06-20 Thor

[這可能會有幫助。]（http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/） – lifus

嗨，謝謝，但這與我試圖做的事情相反。整個過程中，我的圖像上都有一個盒子，當我將它懸停時，我想要滑出。 :) – Thor

你在找這樣的事情嗎（使用Jquery）？

<script type="text/javascript"> 
$('.imgTitleInfoTop').hover(function() { 
    $(this).animate({ 
    height: 0 
    }, 300); 
}, function() { 
    $(this).animate({ 
    height: '60px' 
    }, 300); 
}); 
</script>

來源

2013-06-20 08:39:08

我的理解，你想，當你將鼠標懸停在圖像.imgTitleInfoTop元素隱藏，所以代碼應該是這樣的，那麼：

<script type="text/javascript"> 
$('.yourImage').hover(function() { 
    $(.imgTitleInfoTop).animate({ 
    height: 0 
    }, 300); 
}, function() { 
    $(.imgTitleInfoTop).animate({ 
    height: '60px' 
    }, 300); 
}); 
</script>

（300以毫秒爲單位的時間，怎麼樣這個動作需要做的很多，所以你可以讓它更快或更慢）

來源

2013-06-20 10:16:38

懸停時滑塊元素OUT

回答

相關問題