纯css实现鼠标置上展开显示全部内容效果

米柆

已于 2023-11-06 15:52:50 修改

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Millia‘s work 文章标签：鼠标置上隐藏显示全部

于 2013-09-12 10:57:25 首次发布

本文链接：https://blog.youkuaiyun.com/millia/article/details/11595583

Millia‘s work 专栏收录该内容

56 篇文章

订阅专栏

本文提供了一段使用纯CSS实现鼠标悬浮展开显示全部内容的代码示例，通过设置样式和交互事件，实现了点击或悬浮时内容区域的展开与隐藏，为网页设计提供了便捷的布局解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯css实现鼠标置上展开显示全部内容效果

代码如下：

<!DOCTYPE html 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>纯css实现鼠标置上展开显示全部内容</title>
</head>


<body>
<ul class="lun clearfix f12 lh24">
<li><img src="图片地址" /></li>
<li><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<div><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</div></a></li>
<li><img src="图片地址" /></li>
<li class="ont"><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<p><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</p></a></li>
<li><img src="图片地址" /></li>
<li><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<div><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</div></a></li>
<li><img src="图片地址" /></li>
<li class="ont"><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<p><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</p></a></li>
<li><img src="图片地址" /></li>
<li><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<div><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</div></a></li>
<li><img src="图片地址" /></li>
<li class="ont"><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<p><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</p></a></li>
<li><img src="图片地址" /></li>
<li><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<div><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</div></a></li>
<li><img src="图片地址" /></li>
<li class="ont"><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<p><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</p></a></li>
<li><img src="图片地址" /></li>
<li><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<div><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</div></a></li>
<li><img src="图片地址" /></li>
<li class="ont"><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<p><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</p></a></li>
<li><img src="图片地址" /></li>
<li><a href="#"><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计...<div><b>论点</b>据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.</div></a></li>
</ul>


</body>
</html>