CSS hover

CSS hover

hover 鼠标移动到当前标签上时，以下css属性才能生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 创建类 */
        .pg-header {
            /* 固定页面位置 */
            position: fixed;
            /* 设置右 */
            right: 0;
            /* 设置左 */
            left: 0;
            /* 设置上 */
            top: 0;
            /* 设置高度 */
            height: 48px;
            /* 设置背景颜色 */
            background-color: #2459a2;
        }

        /* 指定字符间位置 */
        .w {
            width: 980px;
            margin: 0 auto;
        }

        /* 设置样式字符距离 */
        .pg-header .menu {
            /* 设置为块级与行内标签 */
            display: inline-block;
            /* 设置字符间距离 */
            padding: 0 10px 0 10px;
            /* 设置字符颜色 */
            color: white;
        }

        /* 鼠标放置后触发 */
        .pg-header .menu:hover {
            /* 修改背景颜 */
            background-color: blue;
        }
    </style>
</head>
<body>
<!--  调用类 -->
<div class="pg-header">
    <!--  调用类，设置边距 -->
    <div class="w" style="margin-top:16px">
        <!--  调用类 -->
        <a class="logo">LOGO1</a>
        <a class="menu">xxx</a>
        <a class="menu">xxx</a>
    </div>
</div>
</body>
</html>

 

posted @ 2019-02-21 16:51  kevin.Xiang  阅读(1774)  评论(0)  编辑  收藏  举报