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>

CSS hover的更多相关文章

  1. 【笔记】css hover 伪类控制其他元素

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  2. CSS active选择器与CSS hover选择器

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. 10个CSS+HOVER 的创意按钮

    CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击.悬停的相关特效,以便大家获得更好的创造灵感. 今天我们 ...

  4. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  5. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  6. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  7. CSS hover box

    CSS hover box transition 踩坑指南, display: none; 作为初始状态,不会产生动画效果,必须设置 height: 0; 或 width: 0; 来实现隐藏! tra ...

  8. css hover对其包含的元素进行样式设置

    <ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...

  9. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

随机推荐

  1. 11.4vue(3)

    2018-11-4 20:57:28 越努力越幸运!永远不要高估自己!!!!! 要主动学习!!! 快把vue看完,进行路飞项目!明天整理一下vue知识点!

  2. 用dx生成dex时遇到class name does not match path

    前言 用dx生成dex时遇到class name (Hello) does not match path这个问题还弄了挺久,这里就简单的记录一下. 步骤 首先是dx工具是在Android的SDK里面的 ...

  3. p1010幂次方---（分治）

    题目描述 任何一个正整数都可以用222的幂次方表示.例如 137=27+23+20137=2^7+2^3+2^0 137=27+23+20 同时约定方次用括号来表示,即aba^bab 可表示为a(b) ...

  4. 浅析 Hinton 最近提出的 Capsule 计划

    [原文]    浅析 Hinton 最近提出的 Capsule 计划     关于最新的 Hinton 的论文 Dynamic Routing Between Capsules,参见 https:// ...

  5. python学习之旅（六）

    Python基础知识(5):基本数据类型之字符串(Ⅱ) 字符串方法 17.join:对字符串进行拼接 x="can" y="li" y.join(x) 结果: ...

  6. 已知长度为n的线性表采用顺序结构，写一算法删除该线性表中所有值为item的元素

    /** * @author:(LiberHome) * @date:Created in 2019/2/27 23:34 * @description: * @version:$ */ /*已知长度为 ...

  7. C#获取邮件客户端保存的邮箱密码

    有时候邮件客户端记录了邮箱密码,但自己却忘记了,此时可以使用C#建立一个临时的"邮件服务器",截取密码: IPEndPoint ipEndPoint = new IPEndPoin ...

  8. 洛谷P3376 【模板】网络最大流

    题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行 ...

  9. CodeForces 733B Parade

    B. Parade time limit per test1 second memory limit per test256 megabytes inputstandard input outputs ...

  10. POJ 3126 - Prime Path - [线性筛+BFS]

    题目链接:http://poj.org/problem?id=3126 题意: 给定两个四位素数 $a,b$,要求把 $a$ 变换到 $b$.变换的过程每次只能改动一个数,要保证每次变换出来的数都是一 ...