简单的鼠标悬停效果

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

<!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>

秒客网

简单的鼠标悬停效果

相关文章