Question

你好那里:)我正在尝试做一些事情，但我实际上并不知道是否可以这样做。默认情况下，所有元素都有底部边框，我想知道当您悬停元素时是否可以覆盖默认的底部边框。所以在这个例子中，只有蓝色边框应该打开，红色边框应该消失。

以下是代码示例： http://jsfiddle.net/vnemilov/0a7duc7h/

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

您应该定位<li>而不是<a>。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您正在覆盖链接边框（a）不是列表元素！你可以这样做：

ul li:hover{
border-bottom:3px solid blue;
padding-bottom:6px;
}

Answer 3

演示 - http://jsfiddle.net/0a7duc7h/2/

ul li:hover {
    border-bottom:3px solid blue;
    padding:5px 5px 3px 5px; /* changed this because element were moving on hover */
}

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

<body>
  <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>
</body>

覆盖前一个元素

3 个答案: