純css實現滑鼠置上展開顯示全部內容效果
一般實現這樣的效果都會選擇用js...簡單明了....本人js稍弱....css強....另加上工作需要...所以就寫了一個純css的...
代碼如下：
<!DOCTYPE <a href="http://www.php1.cn/">html</a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>*{padding:0;margin:0;}ul{list-style:none;} .lun{padding:30px;float:left;font:12px/26px "宋體";}.lun li{width:130px;background:#ffeab8;float:left;}.lun li img{width:130px;height:150px;float:left;}.lun li.ont{background:#cff0fc;_height:130px;}.lun li a{display:block;color:#3d203f;text-decoration:none;padding:10px;width:110px;height:130px !important;_height:130px;position:relative;left:0;top:0;z-index:10;float:left;}.lun li a b{color:#cc0b39;font-size:14px;padding-bottom:5px;display:block;font-size:14px;}.lun li a div,.lun li a p{display:none;}.lun li a:hover{display:block;text-decoration:none;height:100%;position:relative;z-index:1000 !important;}.lun li a:hover div{display:block;color:#3d203f;width:150px;padding:10px;position:absolute;left:-20px;top:-20px;background:#ffeab8;cursor:pointer;box-shadow:1px 1px 10px #333;}.lun li a:hover p{display:block;color:#3d203f;background:#cff0fc;position:absolute;left:-10px;top:-10px;width:150px;padding:10px;box-shadow:1px 1px 10px #333;cursor:pointer;}</style><title>純<a href="http://www.php1.cn/category/72.html">css</a>實現滑鼠置上展開顯示全部內容</title></head> <body><ul class="lun clearfix f12 lh24"><li><img src=http://up.2cto.com/2013/0913/20130913035326256.jpg" /></li><li><a href="http://www.php1.cn/"><p> </p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
