CSS 样式正在我的 a 标签旁边创建一个悬停框,而不是在它上面
CSS style is creating a hover box next to my a tag, rather than over it
我完全被难住了 - 我正在学习在线课程,无法选择与我的老师不同的地方。
当您将鼠标悬停在 link 上时,我试图在每个 link 上显示一个绿色框。目前我得到了盒子,但只在 link
的左边
试图分享完整的 HTML 和 CSS,但太大了,问题不会 post。如果您需要更多信息,请告诉我谢谢
#navbar {
display: flex;
position: sticky;
top: 0;
background: #333;
color: #fff;
justify-content: space-between;
z-index: 1;
padding: 1rem;
}
#navbar ul {
display: flex;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
#navbar ul li a:hover {
background: #93cb52;
border-radius: 5px;
}
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-book-open"></i> Edge
</span>Ledger
</h1>
<ul>
<li><a href="#home"></a>Home</li>
<li><a href="#what"></a>What</li>
<li><a href="#who"></a>Who</li>
<li><a href="#contact"></a>Contact</li>
</ul>
</nav>
离你不远了!我认为您的问题是您没有将 link 文本放在 link 中。例如 Home
应该在 a
元素内,而不是在它的右边。所以 <li><a href="#home"></a>Home</li>
应该变成 <li><a href="#home">Home</a></li>
.
这将导致下划线出现在 link 上,您可以通过将 text-decoration: none
添加到 #navbar ul li a
选择器来禁用下划线。
完整代码如下所示:
#navbar {
display: flex;
position: sticky;
top: 0;
background: #333;
color: #fff;
justify-content: space-between;
z-index: 1;
padding: 1rem;
}
#navbar ul {
display: flex;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
text-decoration: none;
}
#navbar ul li a:hover {
background: #93cb52;
border-radius: 5px;
}
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-book-open"></i> Edge
</span>Ledger
</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#what">What</a></li>
<li><a href="#who">Who</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
祝你好运!
这只是您的代码中的错字
在您的 html 中,您应该将 link 文本放在 a
标签内而不是 li
标签内
那就这样吧
<li><a href="#home">Home</a></li>
<! - - instead of doing that
<li><a href="#home"></a>Home</li>
-->
试图分享完整的 HTML 和 CSS,但太大了,问题不会 post。如果您需要更多信息,请告诉我谢谢
#navbar {
display: flex;
position: sticky;
top: 0;
background: #333;
color: #fff;
justify-content: space-between;
z-index: 1;
padding: 1rem;
}
#navbar ul {
display: flex;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
#navbar ul li a:hover {
background: #93cb52;
border-radius: 5px;
}
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-book-open"></i> Edge
</span>Ledger
</h1>
<ul>
<li><a href="#home"></a>Home</li>
<li><a href="#what"></a>What</li>
<li><a href="#who"></a>Who</li>
<li><a href="#contact"></a>Contact</li>
</ul>
</nav>
离你不远了!我认为您的问题是您没有将 link 文本放在 link 中。例如 Home
应该在 a
元素内,而不是在它的右边。所以 <li><a href="#home"></a>Home</li>
应该变成 <li><a href="#home">Home</a></li>
.
这将导致下划线出现在 link 上,您可以通过将 text-decoration: none
添加到 #navbar ul li a
选择器来禁用下划线。
完整代码如下所示:
#navbar {
display: flex;
position: sticky;
top: 0;
background: #333;
color: #fff;
justify-content: space-between;
z-index: 1;
padding: 1rem;
}
#navbar ul {
display: flex;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
text-decoration: none;
}
#navbar ul li a:hover {
background: #93cb52;
border-radius: 5px;
}
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-book-open"></i> Edge
</span>Ledger
</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#what">What</a></li>
<li><a href="#who">Who</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
祝你好运!
这只是您的代码中的错字
在您的 html 中,您应该将 link 文本放在 a
标签内而不是 li
标签内
那就这样吧
<li><a href="#home">Home</a></li>
<! - - instead of doing that
<li><a href="#home"></a>Home</li>
-->