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. vue里使用create、mounted调用方法的正确姿势

    参考:https://blog.csdn.net/Honnyee/article/details/82421844

  2. vue利用vue ui命令创建项目

    上次用git bash,用create 命令创建vue项目,这是玩个炫酷的------vue ui (前提是有安装node.js). 在目标文件  vue ui 可以看到他在8000端口出现了一个gu ...

  3. myBatis框架_关于怎么获得多表查询的总记录数

    <!-- 查找总记录数 --> <select id="billCount" resultType="int"> select coun ...

  4. python全栈开发 * 27知识点汇总 * 180710

    27   time  os  sys  模块 time 模块 一.表示时间的三种方式 时间戳(timestamp), 元组(struct_time),格式化时间字符串(Format string) 小 ...

  5. Gym 101981K - Kangaroo Puzzle - [玄学][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem K]

    题目链接:http://codeforces.com/gym/101981/problem/K Your friend has made a computer video game called “K ...

  6. （二）juc线程高级特性——CountDownLatch / Callable / Lock

    5. CountDownLatch 闭锁 Java 5.0 在 java.util.concurrent 包中提供了多种并发容器类来改进同步容器的性能. CountDownLatch 一个同步辅助类, ...

  7. 1.7Oob 静态成员

    1)public class Exse3 { static int iCounter = 0; String name; boolean bGender = false; int iAge; doub ...

  8. Python网络编程-Socket简单通信（及python实现远程文件发送）

    学习python中使用python进行网络编程,编写简单的客户端和服务器端进行通信,大部分内容来源于网络教程,这里进行总结供以后查阅. 先介绍下TCP的三次握手: 1,简单的发送消息: 服务器端: i ...

  9. 前端的重要部分js

    js用来实现页面的动态效果. js的特点:1.是客户端语言,客户端进行解释执行. 2.是一种脚本语言 3.是一种基于对象的语言,不用定义类和实例化对象,直接使用类即可 4.js前端和后端都可以做 js ...

  10. Linux服务器上搭建web项目环境

    一.下载并安装jdk 去官网下载linux系统上jdk的安装包jdk-8u181-linux-x64.tar.gz,在Linux的/usr目录下新建文件夹java,可以使用命令:cd /usr    ...