web------鼠标悬停

来源：互联网发布：淘宝图片空间在哪里编辑：程序博客网时间：2024/05/22 15:35

这里图片有可能加载不出来，您可以换一个图片放上去，鼠标悬停会出现红色的图片和文字变红效果，拿开则会恢复原样

<!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">                IT资产管理软件            </div>        </div>    </body></html>

效果图如下
鼠标悬停

阅读全文

0 0