时间戳

首页 > 解决方案 > CSS样式在我的标签旁边创建一个悬停框，而不是在它上面

html - CSS样式在我的标签旁边创建一个悬停框，而不是在它上面

问题描述

在此处输入图像描述我完全被难住了——我正在学习在线课程，无法选择与老师不同的地方。当您将鼠标悬停在每个链接上时，我试图在每个链接上放置一个绿色框。目前我得到了盒子，但只在链接的左边

试图共享完整的 HTML 和 CSS，但太大，问题不会发布。如果您需要更多信息，请告诉我谢谢

#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>

标签： htmlcsshover

解决方案

你不远了！我认为您的问题是您没有将链接文本放在链接中。例如Home应该在a元素内部，而不是在它的右边。所以<li><a href="#home"></a>Home</li>应该变成<li><a href="#home">Home</a></li>.

这将导致链接上出现下划线，您可以通过添加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>

祝你好运！

推荐阅读