css:如何在sprint元素下添加空格

Question

我正试图用sprint中的一些手写元素创建一个菜单。每个元素不仅有标题，还有下划线。

当我想裁剪元素的底部（下划线）并仅在悬停时显示时，就会出现问题。我不能简单地给我的元素一个高度并在悬停时增加高度，因为下面的元素会闪烁并下降，IMO看起来很难看。这就是我目前所拥有的：

<article style="overflow-y: scroll;" class="menu-container">
      <a class="menu-item menu-about" href='about.html'>About</a>
      <a class="menu-item menu-projects" href='projects.html'>Projects</a>
      <a class="menu-item menu-now" href='now.html'>Now</a>
      <a class="menu-item menu-contact" href='mailto:[e-mail]'>Contact</a>
    </article>
.menu-item {
  background-image: url(http://i.imgur.com/Fb7r7oN.png);
  background-repeat: no-repeat;
  display: block;
  height: 43px;
}
.menu-about {
  background-position: 0 -80px;
  width: 133px;
  height: 67px;
}
.menu-projects {
  background-position: 0 -147px;
  width: 169px;
}
.menu-now {
  background-position: 0 -216px;
  width: 93px;
}
.menu-contact {
  background-position: 0 -275px;
  width: 164px;
}

https://jsfiddle.net/3zgctwvm/

Answer 1

如果菜单项之间有更多的空间，可以吗？

问题是，即使你在悬停时使用背景位置/大小，文本也必须更改其位置。

我做到了：https://jsfiddle.net/3zgctwvm/8/

.menu-item {
  background-image: url(http://i.imgur.com/Fb7r7oN.png);
  background-repeat: no-repeat;
  display: block;
  height: 47px;
  margin-bottom:20px;
}
.menu-item:hover{
  height: 67px;
  margin-bottom:0;
}

这样，所有项目的高度都是47px，边距底部是20px，悬停时高度变为67px，边距bottm变为0。无菜单跳转

Answer 2

正如我在评论中所建议的，这里还有一个伪版本。

我个人更喜欢这种方式，因为它保持了原始div的空白，并且可以更容易地添加动画等，就像我在下面的示例中所做的那样。

.menu-container {
  overflow-y: scroll;
}
.menu-item {
  display: block;
  height: 67px;
  position: relative;
}
.menu-item:after{
  content: "";
  background: url(http://i.imgur.com/Fb7r7oN.png) no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20px;
  transition: bottom 0.3s; 
}
.menu-item:hover:after{
  bottom: 0;
  transition: bottom 0.3s; 
}
.menu-about:after {
  background-position: 0 -80px;
  width: 133px;
}
.menu-projects:after {
  background-position: 0 -147px;
  width: 169px;
}
.menu-now:after {
  background-position: 0 -212px;
  width: 93px;
}
.menu-contact:after {
  background-position: 0 -275px;
  width: 164px;
}

<article class="menu-container">
  <a class="menu-item menu-about" href='about.html'></a>
  <a class="menu-item menu-projects" href='projects.html'></a>
  <a class="menu-item menu-now" href='now.html'></a>
  <a class="menu-item menu-contact" href='mailto:[e-mail]'></a>
</article>