border-color之hover圖片變色
為什么我的需要給三個元素加hover才能實(shí)現(xiàn)同時變色，而老師只用一個.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;
}
2016-12-29
.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;
}
2016-12-16
還是很感謝你，你說的我都能理解，現(xiàn)在我遇到的問題是按照老師說的去做? .add{color:#f6c;}，只會實(shí)現(xiàn)邊框的變色，而不會使里面的內(nèi)容跟著變色，所以不是太懂是什么原因造成的
2016-12-14
傳統(tǒng)做法是針對每一個元素分別添加hover改變顏色，
但是由于border-color默認(rèn)顏色是該樣式中的color的值，
所以他只需要對最外面的a標(biāo)簽添加hover變色，
里面的圖形也會采用這個樣式，并且邊框也跟著采用了這個樣式。
就省了兩個hover（內(nèi)部符號的顏色和他的邊框色），這是我的理解