如何實現鼠標懸停效果，可能jquery

我想知道這個頁面上的展開效果如何實現http://jan.dyrda.org/html/udemy_coupons.html？如何實現鼠標懸停效果，可能jquery

我相信Jquery已被使用。如果有人能指出我有一個關於如何達到同樣效果的資源，我將不勝感激。

2014-01-11 user3186051

什麼擴張效果非常基本的例子？ – j08691

對不起，我應該更具體。我對鼠標滑過優惠券時獲得的效果感興趣，並且它展開以顯示udemy優惠券的詳細信息。是否有可能只通過CSS來實現這一點？ – user3186051

如果你指的是擴大箱子朝頁面的底部，可以使用jQuery了slideDown（）的影響來實現。有在W3School

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $(".btn1").click(function(){ 
    $("p").slideUp(); 
    }); 
    $(".btn2").click(function(){ 
    $("p").slideDown(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>This is a paragraph.</p> 
<button class="btn1">Slide up</button> 
<button class="btn2">Slide down</button> 

</body> 
</html>

w3schools jQuery slideDown()

你只需要更換鼠標懸停和鼠標移開事件按鈕單擊事件的縮略圖

來源

2014-01-11 21:51:30 smitty1

謝謝@ smitty1。建議使用JS或使用CSS來實現這一目標？在此先感謝。 – user3186051

@ user3186051儘管您可以使用CSS獲得類似效果，但如果您想要使用類似於您引用的網站上的緩動效果，則可能需要使用jQuery或其他基於JavaScript的解決方案。單純用CSS實現緩動效果可能有一些方法（如果存在，我從來沒有遇到過），但它可能比使用jQuery更復雜。 CSS繼續發展並從單純的造型中分化出來，因此它可能比幾年前更容易實現。 – smitty1

通過查看網頁的源代碼中，我發現有標記爲一些快速谷歌上搜索我覺得這個可能會爲您的需求http://fredhq.com/projects/roundabout/

來源

2014-01-11 21:40:03

謝謝@cristi_b。答案真的很有幫助，因爲您不僅指引我朝着正確的方向發展，而且您也分享了您的研究成果，這些將在未來幫助我。 – user3186051

沒問題......不客氣，有很多方法可以解決某個問題 –

好後環島......如果你指的元素到縮略圖，你可以使用CSS做到這一點。要創建該效果，您需要編輯轉換，顯示，z-index，溢出和高度，或者您可以使用jquery插件來實現該效果。

您可以瞭解更多有關過渡的this頁：

來源

2014-01-11 21:40:31 sousatg

這就是我確實想要的，雖然我之前沒有說明我更喜歡CSS解決方案。謝謝。 – user3186051

如何實現鼠標懸停效果，可能jquery

回答

相關問題