纯css实现鼠标置上展开显示全部内容效果
程序员文章站
2022-05-09 16:01:21
...
纯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>
下一篇: 关于列变行的10篇文章推荐