通过hover实现鼠标进过背景色变化

<!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;

        }

        .pg-body{

            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>

css-通过hover实现鼠标进过背景色变化的更多相关文章

  1. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  2. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  3. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  4. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

  5. 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式

    去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...

  6. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  7. VM虚拟机黑屏 鼠标进不去

    #开始 可能是我脸黑吧 最近用虚拟机好几次都是黑屏 鼠标进不去 但是任务管理器显示确实有资源消耗 也就是说实际上应该是开机成功了(但是听不到声音 也许是没有开机吧) #解决方案 管理员权限打开 cmd ...

  8. css 鼠标选中内容背景色

    ::selection { background: rgba(32, 178, 170, .6); color: #ffffff; } ::-moz-selection { background: r ...

  9. CSS 如何实现当鼠标放在上面时整行变色呢？

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...

随机推荐

  1. 原生 js 封装get ,post, delete 请求

    现在的项目中都在用VUE 以及react 等MVC, MVVM  框架. 丢弃了原始的JQ .不可能为了个$.ajax();而把JQ引进来吧. 在vue1的开发中 提供了 vueResouce, vu ...

  2. 获取所有选中框的ids值

    var os = $("input[name='rec_ids[]']:checked"); var ids = []; os.each(function(i){ ids.push ...

  3. 用Setup Factory7.0怎样打包delphi的BDE?

    BDE打包发布实例操作步骤如下: 使用软件:Setup Factory 7.0打包 把C:\Program Files\Common Files\Borland Shared中的所有文件和你的开发的应 ...

  4. Spring之AOP注解配置

    1.导入相应jar包 2.引入约束并配置XML文件 <beans xmlns="http://www.springframework.org/schema/beans" xm ...

  5. 【题解】 P1879 玉米田Corn Fields （动态规划，状态压缩）

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...

  6. 解决360WiFi有时候手机连接不上

    有可能是无线网卡的问题: 右击“计算机”->选择“管理”->“设备管理器”->网络适配器->选择“Broadcom  802.11n 网络适配器”,或者你实在不知道哪个是无线网 ...

  7. Activiti学习——Activiti与Spring集成

    转: Activiti学习——Activiti与Spring集成 与Spring集成 基础准备 目录结构 相关jar包 Activiti的相关jar包 Activiti依赖的相关jar包 Spring ...

  8. eos 源码net_plugin分析

    1 net_plugin_impl::connect(connection_ptr c) 函数用于解析地址,内部异步回调async_resolve async_resolve 传递了lambda表达式 ...

  9. Spring cloud 微服务架构 Eureka篇

    1 服务发现 ## 关于服务发现 在微服务架构中,服务发现(Service Discovery)是关键原则之一.手动配置每个客户端或某种形式的约定是很难做的,并且很脆弱.Spring Cloud提供了 ...

  10. [应用篇]第六篇 JSTL之自定义函数标签库

      在之前的JSTL的总结中已经对函数标签库进行了一些说明,在这里我再一次重新整理一下! 自带函数标签库介绍 引入该标签库的方法为: <%@ taglib prefix="fn&quo ...