Pure CSS realisiert den Effekt, den die Maus über das Objekt bewegt, um den gesamten Inhalt zu erweitern und anzuzeigen-CSS-Tutorial-php.cn

Pure CSS realisiert den Effekt, den die Maus über das Objekt bewegt, um den gesamten Inhalt zu erweitern und anzuzeigen

高洛峰

Freigeben： 2016-11-24 11:51:58

Original

2573 Leute haben es durchsucht

Pure CSS realisiert den Effekt, den die Maus über das Objekt bewegt, um den gesamten Inhalt zu erweitern und anzuzeigen

Reines CSS, um den Effekt zu erzielen, dass die Maus darüber bewegt wird, um den gesamten Inhalt zu erweitern und anzuzeigen.

Im Allgemeinen wird js verwendet, um dies zu erreichen Wirkung... einfach und klar. ...Mein JS ist etwas schwach...CSS ist stark...Außerdem habe ich aus Arbeitsgründen ein reines CSS geschrieben...

Der Code lautet wie folgt:

<!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" / alt="Pure CSS realisiert den Effekt, den die Maus über das Objekt bewegt, um den gesamten Inhalt zu erweitern und anzuzeigen" ></li>
<li><a href="http://www.php1.cn/">
<p> </p>

Nach dem Login kopieren