CSS在悬停时更改块级元素的边框颜色，仅用于文本答案

【问题标题】：CSS changing border color of block level element on hover for just the textCSS在悬停时更改块级元素的边框颜色，仅用于文本
【发布时间】：2014-02-12 09:28:29
【问题描述】：

考虑以下几点：

<ul>
 <li><a href="somelink" class="navlink"><span>Link 1</span></a></li>
 <li><a href="somelink" class="navlink"><span>Link 2</span></a></li>
 <li><a href="somelink" class="navlink"><span>Link 3</span></a></li>
</ul>

以及这背后的样式表（简化）：

li {width: 150px;}
a {display:block; text-decoration:none;}
a.navlink span {border-bottom: 1px solid red;}
a.navlink:hover {border-color: magenta;}

正如您将看到的，围绕文本的链接已扩展为覆盖整个框。但是，只有实际文本本身在其下方有一个边框，以防止边框出现在整个框上。我想要实现的是，当您将鼠标悬停在 a 内的任何位置（因此整个框）上时，边框颜色会发生变化。

如果您将鼠标悬停在文本上，并且如果我将上面的边框颜色线更改为类似背景颜色：洋红色；它也有效。但是我认为因为边框已分配给跨度，而不是 navlink 类，所以我认为悬停不起作用。

任何帮助将不胜感激！

【问题讨论】：

我不知道是不是只有我，但你的问题很难理解。再试一次，让它变得简单。我希望整个<ul> 周围的边框改变颜色。类似的东西。

标签： css hover border html

【解决方案1】：

我想你的意思是这样的。因此，当您将鼠标悬停在任何<a> 上时，它将更改<span> 上的边框，即<a> 内部。看看吧。

HTML：

<ul>
    <li><a href="somelink" class="navlink"><span>Link 1</span></a></li>
    <li><a href="somelink" class="navlink"><span>Link 2</span></a></li>
    <li><a href="somelink" class="navlink"><span>Link 3</span></a></li>
</ul>

CSS：

li {
    width: 150px;
}
a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.navlink span {
    border-bottom: 1px solid blue;
}
.navlink:hover > span {
    border-bottom: 1px solid red;
}

DEMO HERE

您的版本已修复：

DEMO HERE

【讨论】：

这正是我所追求的，而且效果很好！非常感谢，并对问题中的混淆表示歉意。
@Whitenoise 很高兴我能帮上忙，混乱可能只是我的大脑造成的：P
不知道如何让 .navlink:hover > span 与 IE6 一起工作，因为它不支持子选择器？

【解决方案2】：

li {width: 150px;}
a {display:block; text-decoration:none;}
a.navlink span {border-bottom: 1px solid red;}
a.navlink span:hover {border: 1px solid magenta;}

Demo

将您的 a.navlink:hover {border-color: magenta;} 更改为 a.navlink span:hover {border: 1px solid magenta;}

【讨论】：

【解决方案3】：

喜欢这个

demo

css

li {
    width: 150px;
}
a {
    display: block;
    text-decoration: none;
}
a.navlink span {
    border-bottom: 1px solid red;
}
a.navlink span:hover {
    border-color: magenta;

}

【讨论】：