zoukankan      html  css  js  c++  java
  • CSS基础(二十三)--Hover鼠标悬浮变色

    随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML。

    #------------------------------------------------我是可耻的分割线-------------------------------------------

    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;
                /*表示放在标签中间*/
                line-height: 48px;
            }
            .pa-boby{
                margin-top:50px;
            }
            .w{
                width:980px;
                margin:0 auto;
            }
            .pg-header .menu{
                display: inline-block;
                padding: 0 10px 0 10px;
                color: white;
            }
            /*当鼠标移动到当前标签上时,以下css属性才生效*/
            .pg-header .menu:hover{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="w">
                <a class="logo">LOGO</a>
                <a class="menu">全部</a>
                <a class="menu">42区</a>
                <a class="menu">段子</a>
                <a class="menu">1024</a>
            </div>
        </div>
        <div class="pg-body">
            <div class="w">a</div>
        </div>
    </body>
    </html>

    效果:

  • 相关阅读:
    BeanFactory 工厂模式
    中小型企业架构
    数据状态图
    好文章
    leetcode 最受欢迎的91道题目
    windows下安装mysql8并修改密码
    leetcode 1049 Last Stone Weight II(最后一块石头的重量 II)
    leetcode 910. Smallest Range II
    leetcode 908. Smallest Range I
    leetcode 900. RLE Iterator
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11303800.html
Copyright © 2011-2022 走看看