悬停时 CSS 更改边框颜色

CSS Change Border Color on Hover

提问by user3216933

I'm using the following CSS code to create a box around some content/links:

我正在使用以下 CSS 代码围绕某些内容/链接创建一个框：

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

I want to make it so that when the mouse cursor hovers over the box, the black border color changes to purple.

我想让它当鼠标光标悬停在框上时，黑色边框颜色变为紫色。

回答by Axel

Use the :hoverpsuedo selector:

使用:hover伪选择器：

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

回答by tim.baker

Very easy, just apply the selector :hover

很简单，只需应用选择器 :hover

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

JSFiddle Here for you

JSFiddle在这里为您服务

回答by otinanai

You can use colorinstead of border-colorwhich inherits the color of the border as well:

您也可以使用color代替border-colorwhich 继承边框的颜色：

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

.box:hover {
color:purple;
}

See this demo here.

在此处查看此演示。