如何使用边框线进行悬停效果

Question

我想重现附加图片

的相同悬停效果

这是一个草图，我不太清楚如何开始

Answer 1

假设您希望在悬停时在每个项目下方显示粗线，则有多种方法可以执行此操作。

编辑：我使用background-position和linear-gradient添加了一些解决方案。

border

设置为在悬停li项目时显示边框。

这有问题，因为引入边框会强制元素移动并破坏对齐。在这种特殊情况下，文本内容会向上移动。 （例子 - 1）。

只需在悬停时设置border-color。

您所做的是设置从li开始的所有transparent项目的边框作为边框颜色。将鼠标悬停在每个项目上时，只需将颜色更改为所需的颜色即可。这样它就不会破坏你的布局。 （例2）。

box-shadow

box-shadow可以用来欺骗它，它比border方法更好，因为它不会影响元素的盒子模型。 （例子 - 3）。

＆＃13;

＆＃13;

.menu {
  list-style-type: none;
}
.menu li {
  display: inline-block;
  transition: 0.3s;
  padding: 10px;
}
.menu.border li:hover {
  border-bottom: 2px solid tomato;
  /*causes disturbances in layout*/
}
.menu.border-better li {
  border-bottom: 2px solid transparent;
  /* forces you to have borders from start and consider them in calculation of height*/
}
.menu.border-better li:hover {
  border-bottom-color: goldenrod;
}
.menu.box-shadow li:hover {
  box-shadow: inset 0 -2px 0 0 magenta;
}
.menu.gradient li:hover {
  /*If you don't care about transition...
  * also, it may not work in multiple scenarios.
  */
  background-image: linear-gradient(to top, red 2px, transparent 0);
}
.menu.background-position li {
  /** want to use background but want transition to work? use this.*/
  background-image: linear-gradient(to top, red 2px, transparent 0);
  background-position: 0 2px;
  background-repeat: no-repeat;
}
.menu.background-position li:hover {
  background-position: initial;
}

＆＃13;

Example - 1
<ul class="menu border">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Example - 2
<ul class="menu border-better">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
Example - 3
<ul class="menu box-shadow">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
Example - 4
<ul class="menu gradient">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Example - 5
<ul class="menu background-position">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我个人更喜欢box-shadow方法，因为。

• 它有很好的浏览器支持。
• 它不会打扰页面上的其他元素。
• 它并不要求我从某种设置开始。
• 它不会影响相关元素的盒子模型。

Answer 2

这是我的解决方案：http://codepen.io/thovo/pen/WxQpaP

我们的想法是，您无法对包含border-bottom的主box-shadow使用li或a，因此我建议您使用像{{1}这样的peuseudo类或} before可以在您的照片中获得相同的效果。

EDIT1 我刚从@Jacob

借用了HTML部分

Answer 3

通常，您可以通过替换margin-bottom之类的内容并将其替换为border-bottom来完成此操作，例如：

nav a {
    display: inline-block;
    margin-bottom: 4px;
}

nav a:hover {
    margin-bottom: none;
    border-bottom: 4px;
}

这假设您的HTML类似于：

<nav>
    <a href="#">About</a>
    <a href="#">Schools</a>
    <a href="#">Jobs</a>
    <a href="#">Lookbook</a>
    <a href="#">Figures</a>
    <a href="#">Indexes</a>
    <a href="#">Calendars</a>
</nav>