zoukankan      html  css  js  c++  java
  • 菜单鼠标放上去,另一个样式

    可用于菜单,点赞,等。都是基于样式的hover事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: #2459a2;
                height: 48px;
                line-height: 48px;
            }
            .pg-body{
                margin-top: 50px;
    
            }
            .w{
                 980px;
                margin: 0 auto;
            }
            .pg-header .menu{  /*只对pg-header下的menu的样式生效*/
                display: inline-block;
                padding: 0 10px;  /*如果写二个数字,表示上下像素为0,左右像素为10 这里,要写全了是顺时针方向,0 10 0 10 上0右10下0左10*/
                color: white;
            }
            .pg-header .menu:hover{   /* hover事件是当鼠标放上去时触发,这里表示只有pg-header下的menu样式才有这个样式效果,且只有在鼠标放上去时*/
                background: 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">fd</div>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    singleton 单例模式
    try catch finall 结构里的 return
    ConcurrentHashMap
    ConcurrentHashMap原理分析
    Java 实现两个整数变量的交换
    Java reflect 反射 3 Class.forname
    Java reflect 反射 2
    Java reflect 反射 1
    java class load 类加载
    HashMap源码解析
  • 原文地址:https://www.cnblogs.com/alex-hrg/p/9374989.html
Copyright © 2011-2022 走看看