通过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. github建仓库注意

    在导入新的项目工程时,github建仓库时不要选择readme文件初始化仓库

  2. Mybatis 从入门到精通一：mybatis的入门

    1.Mybatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation(阿帕奇软件基金会) 迁移到了google ...

  3. BZOJ2744 HEOI2012朋友圈（二分图匹配）

    先考虑B国.容易发现a xor b mod 2=0即二进制末位相同,那么可以据此将所有人分成两部分,每一部分各自是一个完全图.然后再将a or b有奇数个1的边连上,现在需要求的就是这样一个图里的最大 ...

  4. MySQL 5.7基于组提交的并行复制

    参考链接: http://mysql.taobao.org/monthly/2016/08/01/ https://www.kancloud.cn/thinkphp/mysql-parallel-ap ...

  5. MT【79】任意和存在并存

    评:一般这个题目是先考虑$x$的存在性,再考虑$t$的任意性.最后按照动区间定轴类型处理,考虑区间和对称轴的相对位置.

  6. 【BZOJ4477】[JSOI2015]字符串树（Trie树）

    [BZOJ4477][JSOI2015]字符串树(Trie树) 题面 BZOJ 题解 对于每个点维护其到根节点的所有字符串构成的\(Trie\),显然可持久化一下就很好写了. 然后每次询问就是\(u+ ...

  7. BZOJ 2668 [cqoi2012]交换棋子 | 最小费用最大流

    传送门 BZOJ 2668 题解 同时分别限制流入和流出次数,所以把一个点拆成三个:入点in(x).中间点mi(x).出点ou(x). 如果一个格子x在初始状态是黑点,则连(S, mi(x), 1, ...

  8. CRM 报表导出excel时指定sheet名

    如图所示,设置PageName即可: 这样导出excel时,sheet的名就有了:

  9. emWin 工程之汉字显示

    @2018-7-10  工程加入字库后,液晶屏显示非法文字,无法正确显示设置的文字 解决办法 将显示汉字的文件 <MainTask.c> 修改为 UTF-8 格式后显示正常,修改为 ANS ...

  10. Linq与Lambda，神一般的工作效率

    Linq与Lambda,神一般的工作效    通过对linq和lambda的学习,越发感觉linq和lambda的重要性,他们能极大地简化程序,同时提升程序的可读性,大大提升了我们的工作效率,在公司的 ...