一天坑之--css伪类,hover消除
来源:互联网 发布:晋业进销存软件 编辑:程序博客网 时间:2024/06/17 21:11
精通css里是这么解释伪类的作用的:根据文档结构以外的一些条件,对元素进行样式的应用。大致意思就是我不需要像常用的选择器例如ul li{ background:red }这样去根据文档结构来应用样式。伪类有这么几种条件:link visited(这些都只能应用于锚元素,也就是指定超链接的元素,所以它们也叫链接伪类),hover,active ,onfous(统称动态伪类)。
link和visited:这个就很常见了,大家在打开一些网站都知道超链接是蓝色的,其实你也可以设置成你想要的颜色
比如:<style type="text/css">
a:visited {color: #00FF00}//绿色
</style>
<a href="/index.html" target="_blank">我就是绿色的超链接你服不服?</a>
hover:啥意思呢?就是鼠标进入元素范围的时候触发样式应用。
<style type="text/css">
a:visited {color: red}
</style>
<a href="/index.html" target="_blank">鼠标移进来我就是红色的超链接你服不服?</a>
active:点击元素触发样式应用。
<style type="text/css">
a:visited {color: blue}
</style>
<a href="/index.html" target="_blank">鼠标点击我就是蓝色的超链接你服不服?</a>
onfoucs:元素获得焦点的时候。
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
<input type="text" name="fname" />我获得焦点的是就是黄色的你服不服?
好,这下大家服了吧。注意:hover和active必须要定义在link和visited之后,而且active必须要在hover之后才会生效。
好了接下来说说今天遇到的问题,以前写了一个组件,在公共css文件中这么定义
.goodsbuttongroup li:hover{ background:#7fba00; color:#fff;}
之后想把它运用在一组点击按钮中,后来产品想让我去除这个hover功能,一开始就各种百度,什么解绑hover啊,都没用。最后发现这个有用。
.goodsbuttongroup li:not(.nohover):hover {
background:#7fba00; color:#fff;
}
哎!这么一来,我把不需要hover功能的li标签全加上了nohover类,就解决了问题了。这意思就是该类下li标签但不属于nohover类的标签支持hover的定义。
- 一天坑之--css伪类,hover消除
- CSS :hover 伪类
- CSS :hover 伪类
- CSS :hover 伪类
- css中hover伪类的bug
- CSS伪类:hover 在IE中使用及其BUG
- 简单了解学习CSS的伪类(特别是hover,actived)
- IE6中a:hover的CSS伪类无效
- 利用 hover 伪类创建纯 CSS 收缩面板
- CHROME审查元素如何查看hover伪类的CSS?
- css精灵和hover伪类的联合使用
- CSS :hover伪类选择定义和用法
- Css中的伪类link,visited,hover,focus,active
- a:hover 伪类
- css伪类hover ie6bug,揭开IE6下hover不显示原因
- CSS之伪类
- CSS之伪类
- CSS之伪类
- iOS单利模式的创建
- 2016.10.18出题人丁明朔校内模拟赛反思
- 排序算法 选择排序
- java笔记1-入门
- 活动的最佳实践--第一行代码
- 一天坑之--css伪类,hover消除
- java笔记2-变量和数据类型
- 直接下载excel
- Hibernate映射文件的编写以及一对多关联关系的笔记
- 安装Mongodb遇到的问题与解决经验
- JSTL标签和I18N
- 小错误
- 使用Retrofit获取JSON数据
- android插件化之路