jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果
更新時(shí)間：2020年01月11日 11:18:22 作者：fengzhen8023
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery鼠標(biāo)移入顯示蒙版的具體代碼，供大家參考，具體內(nèi)容如下
效果展示：
具體代碼：
<ul id="fourth_tab"> <li> <img src="img/camera_green.png" alt="綠色相機(jī)" class="camera"> <p class="title"><span>攝影小白成長(zhǎng)記</span></p> <p>The best preparation for tomorrow is doing your best today.</p> </li> <li style="background-color: red"> <div class="show_more"><a href="html/test.html" >點(diǎn)擊查看更多</a></div> <img src="img/bus.webp" alt="公交車"> </li> <li style="background-color: red"> <div class="show_more"><a href="html/test.html" >點(diǎn)擊查看更多</a></div> <img src="img/life.png" alt="落葉"> </li> </ul>
#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);
});
個(gè)人筆記：
1.這里主要使用到j(luò)Query的slideUp()、slideDown()函數(shù)
2.在js代碼中，使用$(this)來做限制。鼠標(biāo)移入第二張圖片，那么這張圖片上面顯示蒙版，其他的圖片不顯示
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery下判斷Id是否存在的代碼，需要的朋友可以參考下。2011-01-01
easyui messager alert 三秒后自動(dòng)關(guān)閉提示的實(shí)例
下面小編就為大家?guī)硪黄猠asyui messager alert 三秒后自動(dòng)關(guān)閉提示的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jquery attr方法獲取input的checked屬性問題
如果使用jquery,應(yīng)使用prop方法來獲取和設(shè)置checked屬性，不應(yīng)使用attr,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jquery獲取checkbox的值并post提交,需要的朋友可以參考下2015-01-01
BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法
在項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到這樣的功能，為了防止在Bootstrap中點(diǎn)擊按鈕多次提交，所以希望點(diǎn)擊按鈕后禁用按鈕。怎么實(shí)現(xiàn)此功能呢？今天腳本之家小編給大家分享BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法，非常不錯(cuò)，感興趣的朋友參考下吧2016-09-09
webpack中引用jquery的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獁ebpack中引用jquery的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-06-06
jquery ztree實(shí)現(xiàn)右鍵收藏功能
最近做項(xiàng)目需要使用ztree做一個(gè)右鍵收藏功能，下面小編給大家分享實(shí)例代碼，需要的朋友參考下吧2017-11-11
jquery ajax分頁(yè)插件的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了jquery ajax分頁(yè)插件的簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JQuery中queue方法用法,結(jié)合實(shí)例形式分析了queue方法操作函數(shù)隊(duì)列相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01