a:hover实例

来源：互联网发布：西安软件测试招聘编辑：程序博客网时间：2024/06/10 16:42
这里写图片描述
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>CSS完成神奇创意的相框</title>        <style type="text/css">            * {                text-align: center;                border: 0;                list-style: none;            }            body {                font-size: 12px;                font-family: Tahoma, Geneva, sans-serif;                background: #000;            }            .photo {                width: 404px;                margin: 0 auto;                border-left: solid 8px red;                border-right: solid 8px red;                background: #fff;            }            .photo h1 {                font-size: 14px;                color: #666;                line-height: 40px;            }            .photo ul {                margin: 0;                padding: 0;            }            .photo li {                position: relative;                width: 400px;                height: 300px;                overflow: hidden;            }            .photo li a:hover span {                display: block;                text-align: center;                position: absolute;                top: 0;                left: 0;                width: 100%;                height: 100%;                font-size: 40px;                line-height: 300px;                color: #f00;                background: #000;                filter: alpha(opacity=70);                -moz-opacity: 0.;                opacity: 0.7;            }            .magic1,            .magic2,            .magic3 {                position: absolute;                top: 0;                left: 0;                width: 100%;                height: 100%;            }            .magic1 {                background: url(01.png) no-repeat;            }            .magic2 {                background: url(02.png) no-repeat;            }            a:hover {                text-decoration: none;            }        </style>    </head>    <body>        <div class="photo">            <h1>Magic Photo Frame 神奇创意相框</h1>            <ul>                <li>                    <a href="#"><img src="wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1">&nbsp;</em></a>                </li>                <li>                    <a href="#"><img src="wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2">&nbsp;</em></a>                </li>            </ul>        </div>    </body></html>
0 0