Question

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

这是我想要的样子：

navigation

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。

您可以通过在父母身上使用相对定位和在孩子身上使用绝对定位来解决此问题。

这将使其脱离文档流程，防止它影响导航栏。

这是我添加的内容。

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

如果您希望所有文字显示在一行上，您可能需要进一步处理小文本的宽度。

再次点击JSFiddle链接。

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

1 个答案: