0

我试图让我的链接周围的边框改变链接的颜色。我已经设置好了，所以a.hover稍微改变了颜色，并想让它也改变边框颜色。是否可以仅使用 CSS 和 HTML 来做到这一点？

这是我的 HTML 代码：

<h1>
    <a class="border" href="http://example.com">Home</a>
    <a class="border" href="http://example.com/forum">Forum</a>
</h1>

这是我的CSS：

h1 {
text-align: center;
color:#00F;

}
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00F;
}
a:hover {
text-decoration: none;
color: #006;
}
a:active {
text-decoration: none;
color: #000;
}
a.border {
border-style: solid;
border-color: #00F;
border-width: 5px;
}
4

6 回答 6

3

我清理代码：

<h1>
    <a href="http://example.com">Home</a>
    <a href="http://example.com/forum">Forum</a>
</h1>​

    h1 {
  text-align: center;
  color:#00F;
}
a:link, a:visited {
  color: #00F;
  text-decoration: none;
  border: 5px solid #00F;
}
a:hover {
  text-decoration: none;
  color: #006;
  border: 5px solid #006;
}
a:active {
  text-decoration: none;
  color: #000;
  border: 5px solid #000;
}​

使用边框，我在标签 html 中删除了类。

http://jsfiddle.net/SUMEk/

于 2012-12-18T20:37:55.580 回答
2

你想border: 5px solid #000000;在你的里面添加a:hover{}我认为

  • 除非您删除标签border上的类或在其中添加以上内容，否则这将不起作用- 请阅读评论以获取解释。<a>a.border:hover{}
于 2012-12-18T19:52:44.097 回答
2

您正在寻找 CSS 属性“边框”。以下代码将在您悬停时添加边框：

a.border:hover {
    text-decoration: none;
    color: #006;
    border-style: solid;
    border-color: red;
    border-width: 5px;
}

您的 a.border 比您的 a:hover 选择器更具体。因此，您不会看到边界。

JS 小提琴：http: //jsfiddle.net/vJ2fJ/2/

于 2012-12-18T19:56:27.707 回答
2

你唯一需要的是：

a.border:hover {
    border-color: red;
}

其他样式已经继承。

于 2012-12-18T20:49:21.657 回答
1

如果您希望在用户将鼠标移过您的项目时更改样式，请使用 ":hover" 伪选择器。你的 CSS 应该是这样的：

a:hover {
    border:5px solid #00F;
}

当您悬停任何链接时，您将看到效果。

于 2012-12-18T20:06:47.933 回答
1 
a.border:hover{
    border-color: #006; /*Or whatever*/
}

我建议阅读http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-12-18T20:36:54.213 回答