通过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. hao360恶意篡改IE首页——修复方法

    设置浏览器首页空白或自定义后,点击开始菜单,找到IE浏览器,右键进入属性,找到shortcut里面“目标”,你会看到里面链接到的是hao360什么乱糟糟的,这才是以上问题的关键原因.删除图1中红色内容 ...

  2. Docker(二十四)-Docker使用Portainer搭建可视化界面

    Portainer介绍 Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台 ...

  3. Restful api 防止重复提交

    当前很多网站是前后分离的,前端(android,iso,h5)通过restful API 调用 后端服务器,这就存在一个问题,对于创建操作,比如购买某个商品,如果由于某种原因,手抖,控件bug,网络错 ...

  4. 【模板】Floyd

    int n; ][MAX_N + ]; void Floyd() { ; k <= n; ++k) { ; i <= n; ++i) { ; j <= n; ++j) { d[i][ ...

  5. Xml文档添加节点和属性

    XmlDocument doc = new XmlDocument(); XmlElement xmlElement = doc.CreateElement("节点名称"); xm ...

  6. 洛谷P2542 [AHOI2005]航线规划（LCT，双连通分量，并查集）

    洛谷题目传送门 太弱了不会树剖,觉得LCT好写一些,就上LCT乱搞,当LCT维护双连通分量的练手题好了 正序删边是不好来维护连通性的,于是就像水管局长那样离线处理,逆序完成操作 显然,每个点可以代表一 ...

  7. Goodbye My Old Days

    几天前的CTT的胸牌上印着熟悉的初中学校的名字,回想起自己早已废弃的博客,不禁感慨万分.如你所见,一位名叫supy的菜鸡OIer曾经小心翼翼地写下一篇篇文章来装点这个地方,时间是初二的ZJOID1直到 ...

  8. NOIP2018初赛提高组复习提纲（By HGOI LJC）

    Download:https://pan.baidu.com/s/16khhFf_0RsUjJLETreb20w (PDF) https://pan.baidu.com/s/1BVZqLs3q1clZ ...

  9. 在Mac OS X上用Fluid把网页变成本地App

    最近一直在个在线听音乐的解决方案,也下了很多的本地软件,什么酷狗.酷我.豆瓣.虾米.QQ.百度音乐之类的,下了一大堆,都逐个测试了,效果都不是很理想-- 要么是UI太悲催,要么是对Retina支持不友 ...

  10. PHP内核-环境搭建(一)

    难得闲下来,发现自己没有系统的学习过PHP内核,希望我能够慢慢啃下PHP内核书籍,无论是抄袭也好,码字也好,一步一个脚印走下去. 学习来源:http://www.php-internals.com/b ...