鼠标悬停图标

来源：互联网发布：jsbrowser是什么软件编辑：程序博客网时间：2024/06/05 09:58
鼠标悬停实例

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            .demo{                border: 1px solid #ffffff;                width: 100px;                height: 100px;                text-align: center;                float: left;            }            .icon{                width: 60px;                height: 56px;                background: url(img/tb01.png) no-repeat;                margin: 10px auto;            }            .demo:hover{                border: 1px solid red;                cursor: pointer;            }            .demo:hover .icon{                background: url(img/tb02.png) no-repeat;            }            .demo:hover .font{                color: red;            }        </style>    </head>    <body>        <div class="demo">            <div class="icon">            </div>            <div class="font">                文本内容            </div>        </div>        <div class="demo">            <div class="icon">            </div>            <div class="font">                文本内容            </div>        </div>        <div class="demo">            <div class="icon">            </div>            <div class="font">                文本内容            </div>        </div>        <div class="demo">            <div class="icon">            </div>            <div class="font">                文本内容            </div>        </div>    </body></html>
阅读全文
0 0