通过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. Citrix Merchandising Server 配置

    获取Citrix Merchandising Server虚拟镜像: 我们可以从Citrix官网上下载Citrix Merchandising Server(分为XenServer和vSphere), ...

  2. [转帖]技术盛宴 | 关于PoE以太网供电技术详解

    技术盛宴 | 关于PoE以太网供电技术详解 https://smb.pconline.com.cn/1208/12085824.html   [PConline 干货铺]随着物联网技术飞速发展,需要提 ...

  3. zookeeper 负载均衡 核心机制-实现原理 包含ZAB协议(滴滴，阿里面试)

    面试也经常问kafka的原理,以及zookeeper与kafka原理的区别:kafka 数据一致性-leader,follower机制与zookeeper的区别: zookeeper是如何实现负载均衡 ...

  4. codeforces1A

    Theatre Square CodeForces - 1A 一个城市的广场面积有 N×M平方米,过段时间,恰逢这个城市的庆典活动,主办方决定在广场上铺设一种新的地砖,这种地砖每块都是a×a平方米的. ...

  5. [LOJ6436][PKUSC2018]神仙的游戏

    loj description 给你一个只有01和?的字符串,问你是否存在一种把?改成01的方案使串存在一个长度为\(1-n\)的\(border\).\(n\le5\times10^5\) sol ...

  6. 如何用React, Webcam和JS Barcode SDK创建Web扫码App

    这篇文章分享下如何结合React Webcam和Dynamsoft JavaScript Barcode SDK来创建Web扫码App. Web实时扫码 从GitHub上下载react-webcam. ...

  7. 【bzoj4730】 Alice和Bob又在玩游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=4730 (题目链接) 题意 给出一个森林,两个人轮流操作,每次把一个节点以及它的祖先全部抹去,无节点可 ...

  8. psutil库

    psutil是一个非常强大的第三方库,用法简单,这里主要是做一下梳理. 先看看官方说明: psutil (python system and process utilities) is a cross ...

  9. 解题：APIO 2018 铁人两项

    题面 建立圆方树,考虑所有路径,发现路径上原来的点双(现在的方点)里的点都可以做中间点.但是路径上被方点夹着的圆点被计重了,要扣掉:枚举的两个端点也被算进去了,要扣掉.所以直接将方点权值设为点双大小, ...

  10. E. The Supersonic Rocket Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)

    http://codeforces.com/contest/1017/problem/E 凸包模板+kmp #include <cstdio> #include <cstdlib&g ...