Question

请考虑以下事项：

<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内的任何地方（整个盒子）时，边框颜色会发生变化。

我可以得到它，如果你只是将鼠标悬停在文本上，边框颜色会发生变化，如果我将上面的边框颜色线更改为背景颜色：magenta;它也有效。但是我认为因为边框已分配给span，而不是navlink类，我认为悬停不起作用。

任何帮助将不胜感激！

Answer 1

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;}

Answer 2

喜欢这个

<强> 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;

}

Answer 3

我认为你的意思是这样的。因此，当您将鼠标悬停在任何<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

CSS在悬停时仅更改文本时更改块级元素的边框颜色

3 个答案:

HTML：

CSS：