Heim >Web-Frontend >CSS-Tutorial >Pure CSS realisiert den Effekt, den die Maus über das Objekt bewegt, um den gesamten Inhalt zu erweitern und anzuzeigen
Pure CSS realisiert den Effekt, den die Maus über das Objekt bewegt, um den gesamten Inhalt zu erweitern und anzuzeigen
- 高洛峰Original
- 2016-11-24 11:51:582569Durchsuche
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>Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie CSS, um Seitentext zu filternNächster Artikel：Verwenden Sie CSS, um Seitentext zu filtern