Question

尝试在border-bottom上显示:hover链接。

Here is the HTML。当您将鼠标悬停在“登录”上时，您应该会在底部看到3px边框

<ul class="secondaryNavList signIn">
    <li class="logo"><img src="images/layout/bbclogo.png" alt="BBC"></li>
    <li class="signin"><a href="/signin">Sign in</a></li>
</ul>

这是悬停的CSS

nav.secondary li.signIn a:hover{
    border-bottom:3px solid #0f0;
}

似乎无法让这个工作？

Answer 1

js和css区分大小写。按<li class="signin">

更改<li class="signIn">

编辑： http://jsfiddle.net/VAtD3/1/

Answer 2

只需检查CSS底部的位置：

nav.secondary li.signIn a:hover{
    border-bottom:3px solid #0f0;
}

而是使用：

.signin:hover{
    border-bottom:3px solid #0f0;
}

这会定位链接的类，然后允许悬停操作触发。

Answer 3

试试这个，在您的html代码中，您使用了<ul class="secondaryNavList signIn">

.secondaryNavList a:hover{
    border-bottom:3px solid #0f0;
}

而不是

nav.secondary li.signIn a:hover{
   border-bottom:3px solid #0f0;
}

DEMO：http://jsfiddle.net/3zP2w/

悬停时出现边框

3 个答案: