Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
726
下圖是 table 表格某一個td的初始動態：
下圖是點擊上面那個 td 之後，加上 active 這個 class 後的狀態：
// 上面的 scss 如下：
td{
border:1px solid #ccc;
text-align: center;
cursor: pointer;
position: relative;
i{
position: absolute;
left:50%;
top:50%;
margin-top: -7px;
margin-left: -22px;
display: none;
}
&.active{
color:green;
background-color: #E8FEDC;
border:1px solid #59AE35;
i{
display: inline-block;
}
}
}
這時會發現只有右邊框、下邊框有換色成功，那左邊框、上邊框呢？只要善用 :before 、 :after 即可達成(加上藍字部份)：
// 更新後的完整 scss 如下：
td{
border:1px solid #ccc;
text-align: center;
cursor: pointer;
position: relative;
i{
position: absolute;
left:50%;
top:50%;
margin-top: -7px;
margin-left: -22px;
display: none;
}
&.active{
color:green;
background-color: #E8FEDC;
border:1px solid #59AE35;
&:before{
content: "";
background-color: #59AE35;
height: 1px;
position: absolute;
top:-1px;
left:-1px;
right:-1px;
}
&:after{
content: "";
background-color: #59AE35;
width: 1px;
position: absolute;
top:-1px;
left:-1px;
bottom:-1px;
}
i{
display: inline-block;
}
}
}
如圖：
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Tweet
寫了
5860316篇文章，獲得
23313次喜歡