为什么我的悬停命令没有遍及整个栏？浅蓝色应该穿过整个条形，而不是那么多

2024-05-21 • 问答

为什么我的鼠标悬停在整个侧栏上？我需要侧边栏悬停以能够跨越整个侧边栏，而不仅仅是一点点。我该如何解决？

#main-container {
  display: table;
  width: 100%;
  height: 100%;
}

#sidebar {
  font-family: sans-serif;
  display: table-cell;
  width: 3.7%;
  vertical-align: top;
  background-color: #0E4D92;
}

#sidebar a {
  display: block;
  padding: 10px;
  color: rgba(255,255,255);
  margin: 15px 30px 0 0;
  text-decoration: none;
  position: relative;
  left: 30px;
}

#sidebar a:hover {
  background-color: #73C2FB;
}

#content {
  display: table-cell;
  width: 85%;
  vertical-align: top;
  padding: 10px 0 0 10px;
}

<div id="main-container">
  <div id="sidebar">
    <img src="img/LetterLogo.png" />
    <a href="index.html">Home</a>
    <a href="about.html">Order</a>
    <a href="#">Portfolio</a>
    <a href="#">History</a>
    <a href="#"></a>
  </div>
</div>

问题是由创建#sidebar a的索引的方式引起的-将left: 30px与position: relative一起使用。删除两者，并改用padding: 10px 10px 10px 40px;。这样，背景将从左边缘开始，并且文本仍将向内缩进。

#main-container {
  display: table;
  width: 100%;
  height: 100%;
}

#sidebar {
  font-family: sans-serif;
  display: table-cell;
  width: 3.7%;
  vertical-align: top;
  background-color: #0E4D92;
}

#sidebar a {
  display: block;
  padding: 10px 10px 10px 40px;
  color: rgba(255,255,255);
  margin: 15px 30px 0 0;
  text-decoration: none;
}

#sidebar a:hover {
  background-color: #73C2FB;
}

#content {
  display: table-cell;
  width: 85%;
  vertical-align: top;
  padding: 10px 0 0 10px;
}

<div id="main-container">
  <div id="sidebar">
    <img src="img/LetterLogo.png" />
    <a href="index.html">Home</a>
    <a href="about.html">Order</a>
    <a href="#">Portfolio</a>
    <a href="#">History</a>
    <a href="#"></a>
  </div>
</div>

为什么我的悬停命令没有遍及整个栏？浅蓝色应该穿过整个条形，而不是那么多

haha004 回答：为什么我的悬停命令没有遍及整个栏？浅蓝色应该穿过整个条形，而不是那么多

大家都在问