如何在悬停时将文本定位在其他文本下方而不影响周围元素

Question

悬停时我的导航栏上出现了文本（从 0 到 1 改变不透明度并转换它的位置），我希望每个悬停标签（.small-nav-text）出现在它的下面相应的导航项，但不影响其周围其他导航项的位置。现在文本太长，所以它会将其他导航项向左和向右推开。

这是我想要的图像：

JSFiddle：http://jsfiddle.net/agentemi1y/qtqvvk24/

我的 scss:

nav {
 li {
  display: inline-block;
 }
 a {
  margin: 0;
  padding: 0 2.1875rem;
  text-align: center;
  font-size: 1.16875rem;
  &:after {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, height 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s, height 0.3s;
    transition: transform 0.3s, opacity 0.3s, height 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  &:hover:before,
  &:focus:before {
    height: 6px;
  }
  &:hover::before,
  &:hover::after,
  &:focus::before,
  &:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }
  span:first-child {
    z-index: 2;
    display: block;
  }

  .small-nav-text {
    font-size: 0.875rem;
    z-index: 1;
    display: block;
    padding: 8px 0 0 0;
    color: rgba(0,0,0,0.4);
    text-transform: none;
    opacity: 0;
    border: 1px solid red;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  &:hover .small-nav-text,
  &:focus .small-nav-text {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
  }
}

}

我的HTML:

<nav>
<p>
    Menu
</p>
<ul>
    <li>
        <a data-scroll href="#why">
            <span>Why</span>
            <span class="small-nav-text">some text here</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#how">
            <span>How</span>
            <span class="small-nav-text">Improving communication</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#product">
            <span>Product</span>
            <span class="small-nav-text">Our flagship product</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#team">
            <span>Team</span>
            <span class="small-nav-text">The gang</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#contact">
            <span>Contact</span>
            <span class="small-nav-text">Let's talk</span>
        </a>
    </li>
</ul>

Answer 1

尝试this。

您可以通过在 parent 上使用相对定位和在 child 上使用绝对定位来解决此问题。

这会将其从文档流中移除，使其不会影响您的导航栏。

这是我添加的。

你的nav a

nav a
{
    display: block;
    position: relative;
}

你的nav a .small-nav-text

nav a .small-nav-text
{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

如果您希望所有文本显示在一行中，您可能需要进一步调整 small-text 的宽度。

又是JSFiddlelink。

如何在悬停时将文本定位在其他文本下方而不影响周围元素

How to position text underneath other text on hover without affecting surrounding elements

html

css

sass