CSS3给伪元素before添加hover操作:
1、伪元素的由两个冒号“::”开头,然后是伪元素的名称 ,使用两个冒号是为了区别伪类和伪元素。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号的语法,但是CSS3中新增的伪元素必须使用两个冒号;
2、一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后,如果我们利用伪元素来进行动画设置,需要给父元素添加样式(position:relative);给:after或者:before添加(position:absolute);
3、某些内容时,只用在css样式表中利用:after与:before来输入内容样式,但更多的,可以结合伪类:hover 来设置动画样式。
这里要注意的是,这几个伪类如果同时出现在一个元素的操作上,顺序不能改变,否则很大程度上会产生紊乱,效果不生效。
::before,::after是伪元素并非doom元素,所以jquery无法选择伪元素。
如果确实需要实现修改伪元素的样式,可以通过下面的例子。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>pseudo-elements test by zhou2003737</title>
<style type="text/css">
p{
color: deepskyblue
}
p:before{
content: attr(data-beforeContent)
color: darkred
}
</style>
</head>
<body>
<p data-beforeContent="测试">1111</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
<!--使用jquery1.8之前版本 click方法更改为toggle-->
var times = 0
$('p').on('click',function(){
switch (times){
case 0:
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
case 1:
$(this).attr('data-beforeContent','你这么叼咋不上天呢')
times++
break
case 2:
$(this).attr('data-beforeContent','那就上天吧')
times++
break
default :
times =0
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
}
})
})
</script>
</html>
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。1。浏览器缺省设置
2。外部样式表
3。内部样式表(位于 <head>标签内部)
4。内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head>标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。