[英]CSS changing border color of block level element on hover for just the text
Consider the following: 考虑以下:
<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>
And the stylesheet behind this (simplified): 以及背后的样式表(简体):
li {width: 150px;}
a {display:block; text-decoration:none;}
a.navlink span {border-bottom: 1px solid red;}
a.navlink:hover {border-color: magenta;}
As you will see the link which surrounds the text has been expanded to cover the whole box. 如您所见,文本周围的链接已扩展为覆盖整个框。 However only the actual text itself has a border underneath it, to prevent the border appearing across the whole box.
但是,只有实际的文本本身在其下方具有边框,以防止边框出现在整个框内。 What I am trying to achieve is that when you hover over anywhere inside the a (so the whole box), the border color changes.
我想要实现的是,当您将鼠标悬停在a内的任何位置时(整个框),边框颜色会改变。
I can get it so that the border color changes if you just hover over the text, and if I change the border-color line above to something like background-color: magenta; 如果将鼠标悬停在文本上方,并且如果将上面的边框颜色线更改为诸如background-color之类的颜色,则可以使边框颜色发生变化。 it also works.
它也可以。 However I think because the border has been assigned to the span, and not the navlink class, I don't think the hover is working.
但是我认为,因为边框已分配给跨度,而不是navlink类,所以我认为悬停不起作用。
Any help would be appreciated! 任何帮助,将不胜感激!
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;}
Change your a.navlink:hover {border-color: magenta;}
to a.navlink span:hover {border: 1px solid magenta;}
将
a.navlink:hover {border-color: magenta;}
更改为a.navlink span:hover {border: 1px solid magenta;}
I think you mean like this. 我想你的意思是这样的。 So when you hover over any of the
<a>
it will change the border on the <span>
thats inside <a>
. 因此,当您将鼠标悬停在任何
<a>
,它将更改<a>
内<span>
上的边框。 Check it out. 看看这个。
<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;
width: 100%;
height: 100%;
text-decoration: none;
}
.navlink span {
border-bottom: 1px solid blue;
}
.navlink:hover > span {
border-bottom: 1px solid red;
}
Your version fixed: 您的版本已修复:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.