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:burnandceline@gmail.com'>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，margin-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:somemail@gmail.com'></a>
</article>

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

2 个答案: