LoVe/HAte

如果只是希望点击的时候显示背景色，那么只需要设置 :active,无需设置:hover

 #navbar:active, #backbtn:active {

     background-color: #005801;

 }

但是如果加入：hover

#navbar:hover,#navbar:active,  #backbtn:hover，#backbtn:active {

    background-color: #005801;

}

那么点击完之后颜色不会消失

关于link, visited, hover, active的更多相关文章

  1. [CSS3] Interactive Pseudo-Classes :link :visited :hover :active

    The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...

  2. a：link visited hover active

    CSS中a:link.a:visited.a:hover.a:active的用法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会 ...

  3. CSS:a:link;visited;hover;active解释及正确顺序

    a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...

  4. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  5. :link,:visited,:focus,:hover,:active详解

    原文::link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究.   ...

  6. a标签伪类link，hover，active，visited，focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  7. 伪类link,hover,active,visited,focus的区别

    例一: /*css*/a:link{  color: blue;}a:visited{  color: green;}a:hover{  color: red;}a:focus{ color:blac ...

  8. a标签的伪元素的应用——link，hover，visited，active

    a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). <!DOCTYPE html> <h ...

  9. 伪样式：hover ,:active,:focus

    <!doctype html>无标题文档 #name:focus { background: #0F6 } #password:hover { background: #F00 } #pa ...

随机推荐

  1. Codeforces 486D D. Valid Sets

    http://codeforces.com/contest/486/problem/D 题意:给定一棵树,点上有权值,以及d,要求有多少种联通块满足最大值减最小值小于等于d. 思路:枚举i作为最大的点 ...

  2. 膜拜一个神奇的女人——Hedy Lamarr

    她演绎了首部露点电影.经历了六次婚姻.出版了首本自曝隐私的自传,还曾入室行窃过两次——在这样一个饱受争议的大环境下,她还能在60多年前提出“跳频”技术和一系列无线信号技术的全新概念,其中,“跳频”技术 ...

  3. C++的ABI真特么是evil

    果然有些公司明确禁止使用STL也是有一定道理的.其实这个问题的本质就是认为大部分开发者是蠢货,没水平掌控这些细节,项目Release万一出乱子了怎么办?为此吐个槽,我链接一个库时,由于编译参数和链接参 ...

  4. linux sed 使用

    sed对文本的处理很强大,并且sed非常小,参数少,容易掌握,他的操作方式根awk有点像.sed按顺序逐行读取文件.然后,它执行为该行指定的所有操作,并在完成请求的修改之后的内容显示出来,也可以存放到 ...

  5. Walls and Gates 解答

    Question You are given a m x n 2D grid initialized with these three possible values. -1 - A wall or ...

  6. hdu 3711 Binary Number(暴力 模拟)

    Problem Description For non-negative integers x and y, f(x, y) , )=,f(, )=, f(, )=. Now given sets o ...

  7. MVC Razor视图引擎

    Razor 不是编程语言.它是服务器端标记语言. Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法 当网页被写入浏览器时,基于服务器的代码能够创建动 ...

  8. AJAX实现google搜索建议实战

    搜索建议实战的目标是为了输入搜索内容,动态的进行匹配,效果图如下: 整体思路: 在客户端搜索框中触发onkeyup事件, 随时向PHP服务器请求当前输入框中的内容, PHP服务器获取到keywords ...

  9. mysql、添加和删除用户、添加权限

    创建用户      mysql>insert into mysql.user(Host,User,Password) values("localhost","tes ...

  10. cocoapods在OS X Yosemite系统中报错

    之前使用cocoapods一直是正常使用的,刚换了电脑,使用pod install的时候报错: /System/Library/Frameworks/Ruby.framework/Versions/2 ...