jQuery如何實現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章將為大家詳細講解有關(guān)jQuery如何實現(xiàn)鼠標(biāo)移入顯示蒙版效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)專注于成華網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供成華營銷型網(wǎng)站建設(shè)，成華網(wǎng)站制作、成華網(wǎng)頁設(shè)計、成華網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造成華網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供成華網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
本文實例為大家分享了jQuery鼠標(biāo)移入顯示蒙版的具體代碼，供大家參考，具體內(nèi)容如下
效果展示：
具體代碼：
攝影小白成長記
The best preparation for tomorrow is doing your best today.
點擊查看更多
點擊查看更多
#fourth_tab li{
position: relative;
border-radius: 6px;
}
.show_more{
width: 100%;
height: 100%;
line-height: 230px;
background-color: #9f594d;
position: absolute;
display: none;
font-size: 22px;
font-weight: bolder;
letter-spacing: 4px;
cursor: pointer;
}
.show_more a{
text-decoration: none;
color: #fbfff9;
}$('#fourth_tab li').mouseenter(function(){
$(this).find('.show_more').slideDown(200);
});
$('#fourth_tab li').mouseleave(function(){
$(this).find('.show_more').slideUp(200);
});個人筆記：
1.這里主要使用到j(luò)Query的slideUp()、slideDown()函數(shù)
2.在js代碼中，使用$(this)來做限制。鼠標(biāo)移入第二張圖片，那么這張圖片上面顯示蒙版，其他的圖片不顯示
jquery是什么
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。
關(guān)于“jQuery如何實現(xiàn)鼠標(biāo)移入顯示蒙版效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
網(wǎng)站欄目：jQuery如何實現(xiàn)鼠標(biāo)移入顯示蒙版效果
標(biāo)題路徑：http://weahome.cn/article/gsoiih.html
重慶分公司
重慶分公司
