csshover经过图片显示背景文字的效果_css设置文字半透明资源-CSDN文库

共12个文件

jpg：6个

html：2个

gif：1个

jquery特效

5星 · 超过95%的资源需积分: 42 145 浏览量 2013-09-20 09:30:44 上传评论收藏 133KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

css hover经过图片显示背景文字的效果.zip （12个子文件）

hover.htc 4KB

images

ard.jpg 11KB

herbal.jpg 14KB

whitehorse.jpg 9KB

lenseview.jpg 17KB

sdd.jpg 45KB

mpi.jpg 13KB

whitehorse.gif 15KB

jquery-1.2.3.min.js 53KB

index.html 4KB

1ӢͼWEB.url 3KB

index-htc.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS swap hover effect - Jquery</title> <style type="text/css"> body { background:#f6f9e7; font: 0.8em "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica; color: #444d27; } p, h1, h2, h3, h4 { margin-bottom:1em; font-weight:normal; } h2 { font:1.8em Georgia, "Times New Roman", Times, serif; text-align:center; } h3 { font:1.5em Georgia, "Times New Roman", Times, serif; } a, img { border:none; } a { color:#d46e00; text-decoration:none; } .center {text-align:center;} #wrap { width:800px; margin:20px auto; } /* ---- styling the list ---- */ #work { float:left; list-style:none; margin:0; padding:0; } #work li { float:left; display:block; width:235px; margin:10px; display:inline; padding:3px; background:#fff; border:1px solid #cad789; height:154px; } #work li a { border:none; } #work p { margin-bottom:0; } /* ---- show-hide elements ---- */ #work li .show{ display:block; width:235px; height:154px; } #work li .hide { color:#d4df9d; text-align: left; height: 0; overflow: hidden; background:#687b00; } #work li:hover .hide, #work li.over .hide { cursor: pointer; height: 133px; padding:10px; width:215px; } #work li:hover .show, #work li.over .show { height: 0; overflow: hidden; } #work li a { color:#e9ff73; font-size:1.3em; } #work li a:hover { color:#fff; } </style>   </head> <body> <div id="wrap"> <h2>CSS Hover Effect</h2> <h4 class="center">With JQuery-based hover fix for IE6</h4> <ul id="work"> <li> <a class="show" href="#" title="SDDirect Website Development"><img src="images/sdd.jpg" alt="Social Developement Direct" /></a> <div class="hide"><a href="#">SDDirect Website Development</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div> </li> <li><a class="show" href="#" title="Whitehorse Website Design" ><img src="images/whitehorse.jpg" alt="White Horse" /></a> <div class="hide"><a href="#">Whitehorse Website Design</a><p>Design and develop XHTML/CSS for The White Horse Inn</p></div> </li> <li><div class="show"><a href="#" title="Lensview Gallery Design" class="thumb"><img src="images/lenseview.jpg" alt="White Horse" /></a></div> <div class="hide"><a href="#">Lensview Gallery Design</a><p>Photo gallery design and integration for Bach Tran</p></div> </li> <li> <a class="show" href="#" title="SDDirect Website Development"><img src="images/ard.jpg" alt="Social Developement Direct" /></a> <div class="hide"><a href="#">SDDirect Website Development</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div> </li> <li><a class="show" href="#" title="Whitehorse Website Design"><img src="images/mpi.jpg" alt="White Horse" /></a> <div class="hide"><a href="#">Whitehorse Website Design</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div> </li> <li><a class="show" href="#" title="Lensview Gallery Design"><img src="images/herbal.jpg" alt="White Horse" /></a> <div class="hide"><a href="#">Lensview Gallery Design</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div> </li> </ul> </div> </body> </html>

评论收藏

内容反馈