CSS鼠标悬停时改变边框颜色

Question

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

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

我希望当鼠标悬停在方框上时，黑色边框颜色变为紫色。

- user3216933

---

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

.box:hover { 新的CSS代码在这里 } - Sam Holguin

Answer 1

使用:hover伪类选择器：

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

- Axel

---

我没有给你点踩，而且看起来给你点踩的人已经清楚地解释了原因。你没有提供OP所要求的答案解决方案。 - Axel

不，我知道你没有给我点踩。我没有发表答案。我想知道为什么你被点踩了。6个赞和1个踩，这才是正确的答案。 - War10ck

哦，我不确定为什么。这是基本的CSS知识...它怎么可能是错误的超出了我的理解。 - Axel

Answer 2

非常简单，只需应用选择器:hover。

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

JSFiddle Here for you

- tim.baker

Answer 3

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

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

.box:hover {
color:purple;
}

请看这里的演示： demo here。

- otinanai

---

OP想要改变边框颜色，而不是文本颜色。border: 2px solid purple;... - War10ck

我更新了你的fiddle。这个解决方案是有效的。但是，如果文本在容器内，文本颜色也会改变，而这不是OP所要求的。你应该重置边框或更改边框颜色... - War10ck

定义“接受替代方案”。这会产生一个不被期望的后果，而这并不是一个解决方案。 - War10ck

替代方案： .box { display:none; } :) - Naele

@otinanai - 另一种解决方案可以使用不同于已发布内容的方法来解决他最初提出的问题（边框颜色）。您的解决方案解决了完全不同的问题，这意味着它不能充分作为合法的替代方案。 - Axel