CSS3如何给伪元素::before添加hover
11个回答
展开全部
CSS3给伪元素before添加hover操作：
1、伪元素的由两个冒号“::”开头，然后是伪元素的名称 ，使用两个冒号是为了区别伪类和伪元素。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号的语法，但是CSS3中新增的伪元素必须使用两个冒号；
2、一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后，如果我们利用伪元素来进行动画设置，需要给父元素添加样式（position：relative）；给:after或者:before添加（position:absolute）；
3、某些内容时，只用在css样式表中利用:after与:before来输入内容样式，但更多的，可以结合伪类:hover 来设置动画样式。
这里要注意的是，这几个伪类如果同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，效果不生效。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div2{
width: 100px;
height: 50px;
line-height: 50px;
background-color: #4ECCC4;
text-align: center;
margin: 0 auto;
-webkit-transform: skewX(-20deg);
}
.div2:hover{
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="div2">
点击这里
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
很明显伪类是不支持hover的，但是，可以给div2加hover。
其实就是 .div2:hover:before{
...代码
}
这样写的意思是div2 hover状态下的before怎样怎样
其实就是 .div2:hover:before{
...代码
}
这样写的意思是div2 hover状态下的before怎样怎样
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你个例子:
html
<div id="button">Button</div>
css:
#button { display: block;
height: 25px;
margin: 0 10px;
padding: 10px;
text-indent: 20px;
width: 12%;}
#button:before { background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;}
#button:hover:before { background-color: red;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你四不四傻，你换个思路，你反正before是盖在div2上的，你不如这样写
div2:hover:before｛
}
div2:hover:before｛
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（9）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
