一天坑之--css伪类,hover消除
2016-10-20 20:03
162 查看
精通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的定义。
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消除
- IE中中CSS伪类:hover的使用及其BUG
- 链接伪类(:hover)CSS背景图片有闪动BUG及解决方案
- css精灵和hover伪类的联合使用
- 链接伪类(:hover)CSS背景图片有闪动BUG
- css伪类hover新的应用技巧思考+fixed屏幕居中
- 【笔记】css hover 伪类控制其他元素
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- css -- hover伪类
- 利用 hover 伪类创建纯 CSS 收缩面板
- CSS :hover 伪类
- css中hover伪类的bug
- CSS :hover伪类选择定义和用法
- CSS :hover伪类选择定义和用法
- 学习笔记---css中伪元素与伪类(迷惑我的:after与:hover)
- 简单了解学习CSS的伪类(特别是hover,actived)
- CSS :hover伪类选择定义和用法
- 简单了解学习CSS的伪类(特别是hover,actived)