border-color之hover图片变色
qq_野火燎原_0
2016-12-14 22:37
为什么我的需要给三个元素加hover才能实现同时变色，而老师只用一个.add:hover{color:$06c;} 下面是我的代码：
<div class="add"></div>
css部分：.add{width: 100px;height: 100px;color: #ccc;transition: color 0.25s;border:1px solid;position: relative;}
.add:before{content:"";display: block;color: #ccc;width: 60px;height: 10px;border-top: 10px solid;position: absolute;left: 50%;top: 50%;margin:-5px 0 0 -30px;}
.add:after{content:"";display: block;color: #ccc;width: 10px;height: 60px;border-left: 10px solid;position: absolute;left: 50%;top: 50%;margin:-30px 0 0 -5px;}
.add:hover,.add:hover:before,.add:hover:after{
color: #f6c;
}
3回答
-
- 光被四表
- 2016-12-29 16:14:04
.add{
width:100px;
height:100px;
border:1px solid;
color:#ccc;
transition:color 0.25s;
position:relative;
}
.add:before{
content:" ";
display:block;
width:60px;
height:10px;
border-color:#ccc;
border-top:10px solid;
position:absolute;
top:50%;
left:50%;
margin: -5px 0 0 -30px ;
}
.add:after{
content:" ";
display:block;
width:10px;
height:60px;
border-color:#ccc;
border-left:10px solid;
position:absolute;
top:50%;
left:50%;
margin:-30px 0 0 -5px;
}
.add:hover{
color:#f6c;
}
-
- qq_野火燎原_0
- 2016-12-16 16:19:18
还是很感谢你，你说的我都能理解，现在我遇到的问题是按照老师说的去做 .add{color:#f6c;}，只会实现边框的变色，而不会使里面的内容跟着变色，所以不是太懂是什么原因造成的
-
- 仲夏4155273
- 2016-12-14 23:02:24
传统做法是针对每一个元素分别添加hover改变颜色，
但是由于border-color默认颜色是该样式中的color的值，
所以他只需要对最外面的a标签添加hover变色，
里面的图形也会采用这个样式，并且边框也跟着采用了这个样式。
就省了两个hover（内部符号的颜色和他的边框色），这是我的理解
CSS深入理解之border
56793 学习 · 75 问题
相似问题