CSS懸停時更改邊框顏色

Question

我正在使用以下CSS代碼在一些內容/鏈接周圍創建一個框：

.box {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;  
    border: 2px solid #000000;
    padding: 5px 40px; 
    background: #ffffff;
}

我要使鼠標懸停在框上時，黑色邊框顏色變為紫色。

Answer 1

使用:hover psuedo選擇器：

.box:hover {
   border-color: purple;
}

Answer 2

非常簡單，只需應用選擇器：hover

.box:hover {
    border:5px solid #b217b4;
}

JSFiddle在這里為您服務

Answer 3

您可以使用color而不是border-color ，它也繼承了border-color ：

.box {
border:2px solid;
color: #000;
}

.box:hover {
color:purple;
}

在這里查看此演示 。