這篇文章給大家分享的是有關(guān)純CSS怎么實(shí)現(xiàn)鼠標(biāo)懸停顯示圖片效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到德安網(wǎng)站設(shè)計(jì)與德安網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋德安地區(qū)。
最近在做一個網(wǎng)盤的項(xiàng)目，用到了鼠標(biāo)移上去效果，這個效果可以用js來實(shí)現(xiàn)，今天主要分享一下，這個效果如何用純css實(shí)現(xiàn)！
效果如下圖：
html代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
下載
已共享
70.3 MB
2 分鐘前
下載
分享
762 kB
2 分鐘前
上面代碼我直接從項(xiàng)目中復(fù)制，可能有很多多余的css,大家只是看下大致代碼！
精華的css
圖片中的效果，大致的實(shí)現(xiàn)思路是，一開始設(shè)置為opacity=0，然后鼠標(biāo)移上去之后顯示。
代碼如下：
CSS Code復(fù)制內(nèi)容到剪貼板
#filelist a.action {
display: inline;
padding: 18px 8px;
line-height: 50px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
display:none;
}
#filelist tr:hover a.action , #filelist a.action.permanent{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
display:inline;
}
#filelist tr:hover a.action:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
display:inline;
}以上是大致的精華代碼！
css技巧分析
tr鼠標(biāo)移上去，下面的a標(biāo)簽顯示可以這么選擇 #filelist tr:hover a.action 加入tr鼠標(biāo)移上去hover了，那么tr下面的a標(biāo)簽的鼠標(biāo)移上去效果同樣有用，這么寫： #filelist tr:hover a.action:hover
jquery中有attr，活動標(biāo)簽的屬性，css也可以和jquery一樣的類似選擇。
例如下面的這個a標(biāo)簽
XML/HTML Code復(fù)制內(nèi)容到剪貼板
我們可以這么寫樣式：
CSS Code復(fù)制內(nèi)容到剪貼板
a.action[data-action="Rename"]{
padding: 16px 14px 17px !important;
position: relative;
top: -21px;
}感謝各位的閱讀！關(guān)于“純CSS怎么實(shí)現(xiàn)鼠標(biāo)懸停顯示圖片效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
文章標(biāo)題：純CSS怎么實(shí)現(xiàn)鼠標(biāo)懸停顯示圖片效果
本文鏈接：
http://weahome.cn/article/ihecgi.html
重慶分公司
重慶分公司
