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. ASP.NET MVC实现Excel文件的上传下载

    在应用系统开发当中,文件的上传和下载是非常普遍的需求.在基于.NET的C/S架构的项目开发当中,有多种方案可以实现文件的上传和下载(httpwebrequest.webclient等),而且多采用异步 ...

  2. 怎么用js编写1——100的质数？

    这里来自csdn问答的一个问题,怎么用js编写1——100的质数? http://ask.csdn.net/questions/214429 质数也就是素数,即只能被1和自身整除的数,因此可以构造循环 ...

  3. js substr和substring

    substr(start[,end]) 字符串截取 start从那里裁,end裁切为数 substring(start[,end = str.length]) // start和end会先处理数值较大 ...

  4. mousedown、mousemove、mouseup和touchstart、touchmove、touchend

    拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touch ...

  5. python全栈开发 * 进程之间的通信,进程之间数据共享 * 180726

    进程之间的通信(IPC)队列和管道一.队列 基于管道实现 管道 + 锁 数据安全(一).队列 队列遵循先进先出原则(FIFO) 多用于维护秩序,买票,秒杀 队列的所有方法: put()(给队列里添加数 ...

  6. 线程同步-SpinWait

    这次将描述如何不适用内核模式的方式来使线程等待.SpinWait,它是一个混合同步构造,被设计为使用用户模式等待一段时间,然后切换到内核模式以节省CPU时间. 代码Demo: using System ...

  7. pandas 2

    ============== sdf={'rkey':[1,2,3,2],'name':['rkey1','rkey2','rkey3','rkey4']}sdf2={'lkey':[1,2,3],' ...

  8. ES6 Map 与 Set

    Map 对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. Maps 和 Objects 的区别 一个 Object 的键只能是字符串或者 Symbols,但一个 Ma ...

  9. java八大数据类型

    基本数据类型以值传递的方式进行传递,String以值传递的方式传递,其他的以地址的方式进行传递 分别是:byte  short  int  long  float  double char boole ...

  10. javaweb(4)之Listener&Filter

    监听器 (Listener) 介绍 监听器用于监听 web 应用中某些对象.信息的创建.销毁.增加,修改,删除等动作的发生,然后作出相应的响应处理.当范围对象的状态发生变化的时候,服务器自动调用监听器 ...