css - 覆盖上一个元素

Question

你好:) 我正在尝试做某事，但实际上我不知道是否可以通过这种方式完成。默认情况下，所有元素都有底部边框，我想知道当您将鼠标悬停在元素上时是否可以覆盖默认底部边框。所以在这个例子中，只有蓝色边框应该出现，红色边框应该消失。

代码示例如下: http://jsfiddle.net/vnemilov/0a7duc7h/

a {
  text-decoration: none;
}
ul {
  list-style-type: none;
  width: 200px;
}
ul li {
  padding: 5px;
  border-bottom: 1px solid red;
}
ul li a:hover {
  border-bottom: 3px solid blue;
  padding-bottom: 6px;
}

<ul class="sidebar">
  <li>
    <a href="#">Sidebar Item #1</a>
  </li>
  <li>
    <a href="#">Sidebar Item #2</a>
  </li>
  <li>
    <a href="#">Sidebar Item #3</a>
  </li>
  <li>
    <a href="#">Sidebar Item #4</a>
  </li>
  <li>
    <a href="#">Sidebar Item #5</a>
  </li>
  <li>
    <a href="#">Sidebar Item #6</a>
  </li>
</ul>

Answer 1

你应该定位 <li>而不是 <a> .

a {
  text-decoration: none;
}
ul {
  list-style-type: none;
  width: 200px;
}
ul li {
  padding: 5px;
  border-bottom: 1px solid red;
}
ul li:hover {
  border-bottom: 3px solid blue;
  padding-bottom: 6px;
}

<ul class="sidebar">
  <li>
    <a href="#">Sidebar Item #1</a>
  </li>
  <li>
    <a href="#">Sidebar Item #2</a>
  </li>
  <li>
    <a href="#">Sidebar Item #3</a>
  </li>
  <li>
    <a href="#">Sidebar Item #4</a>
  </li>
  <li>
    <a href="#">Sidebar Item #5</a>
  </li>
  <li>
    <a href="#">Sidebar Item #6</a>
  </li>
</ul>