简单的鼠标悬停效果

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

注意事项，请见注释。
代码中图片遗失，请换图片测试。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <script type="text/javascript">        document.addEventListener('plusready', function(){            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"        });    </script>    <style>        .s{            border: 1px solid #FFFFFF;            width:100px;            height:100px;            text-align: center;            display:  block;            float: left;        }        .s:hover{            cursor: pointer;            border-color: red;            color:red;        }        .s:hover .a{            background: url(img/tb02.png) no-repeat;        }        .a{            border: 1px solid #FFFFFF;            width:60px;            height:56px;            /*在不设置div的宽度和高度时,先设置背景图片,图片不显示.*/            background: url(img/tb01.png) no-repeat;            margin: 10px auto;        }    </style></head><body >    <div class="s"><div class="a">      </div>    <div>        文本内容    </div>    </div>        <div class="s"><div class="a">      </div>    <div>        文本内容    </div>    </div></body></html>

阅读全文

0 0