CSS hover

最新推荐文章于 2024-03-29 03:19:53 发布

weixin_30614109

最新推荐文章于 2024-03-29 03:19:53 发布

阅读量155

点赞数

原文链接：http://www.cnblogs.com/xiangsikai/p/10413652.html

版权

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>

转载于:https://www.cnblogs.com/xiangsikai/p/10413652.html

weixin_30614109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS hover

CSS hoverhover 鼠标移动到当前标签上时，以下css属性才能生效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...
复制链接

扫一扫