CSS在悬停时更改边框颜色

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.

我想这样做,当鼠标光标悬停在框上时,黑色边框颜色变为紫色。

3 个解决方案

#1

Use the :hover psuedo selector:

使用:hover psuedo选择器:

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

#2

Very easy, just apply the selector :hover

非常简单,只需应用选择器:悬停

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

JSFiddle Here for you

JSFiddle在这里为您服务

#3

You can use color instead of border-color which inherits the color of the border as well:

您可以使用颜色而不是border-color继承边框的颜色:

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

.box:hover {
color:purple;
}

See this demo here.

在此处查看此演示。

#1