CSS样式是在标签旁边而不是在标签旁边创建一个悬停框

Question

我完全感到沮丧-我一直在关注在线课程，无法选择与老师不同的地方。 当您将鼠标悬停在每个链接上时，我试图在它们上面有一个绿色框。目前，我得到了方框，但仅位于链接的左侧

试图共享完整的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>

Answer 1

您并不遥远！我认为您的问题是您没有将链接文本放在链接内。例如，var repeat = function(arr) { for(let i=0; i<arr.length; i++){ const obj = {}; if (obj.hasOwnProperty(arr[i])) { return arr[i] } else { obj.arr[i] = i; } } }; 应该在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;
}

祝你好运！

Answer 2

这只是您代码中的错字

在您的html中，您应该将链接文本放在test2 != int标记内，而不是try: isinstance(test1, int),isinstance(test2, int) except: if not test1: print("test1 error") if not test2: print("test2 error") 标记内

这样做

a