html - 悬停时在图像下方显示文本而不干扰其他元素

Question

因此，我正在为一个新站点创建一个菜单，并且我正在尽最大努力使其具有移动响应能力。菜单中的每个元素都有一个图标和一个名称。当屏幕全宽时，两者都会显示，文本位于图标下方。

我已将其设置为当用户滚动链接时，文本会改变颜色并且图标的背景图像也会改变。

当屏幕变小时，文字消失，只留下图标。当前，当用户在此模式下将鼠标滑过其中一个图标时，文本将出现在下方，但它也会移动其周围的元素并将图标向上移动。我希望能够让图标在滚动时保持在相同的位置，并在不改变宽度或破坏其他图像的情况下让文本显示在下方。

我已经做了一个我希望它看起来如何的小模型，以及我当前的解决方案 here .

系统使用 Foundation，但我无法编辑任何 js，我只能在我的 css 文件和菜单的这个 HTML 部分中工作。菜单两侧有两个未显示的元素。

这是我的菜单 HTML 的一部分。

<div id="icon-menu" class="medium-9 columns">
    <div class="menu-item">
        <a href="/home">
            <div id="nav-home"></div>
            <span>Home</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="/my-learning">
            <div id="nav-my-learning"></div>
            <span>My Learning</span>
        </a>
    </div>
</div>

这是我的 css，带有一个翻转示例:

#logo img{
    max-width: 60px;
    width: 100%;
}

#icon-menu{
    text-align: center;
}

.menu-item{
    display: inline-block;
    margin: 0px 15px;
}

.menu-item a{
    font-size: 0.9rem;
    color: #606060;
}

.menu-item a:hover{
    color: #803589;
    font-weight:400;
}

.menu-item div{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 30px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1250px) {
    .menu-item span{
        display: none;
    }

    .menu-item div{
        height:50px;
    }

    .menu-item a:hover span{
        display: initial;
        position: relative;
    }

    .menu-item a:hover div{
        height: 30px;
    }
}

/*------Styling the Menu Hovers------*/

#nav-home{
    background-image: url("/site/img/icon_home.png");
}

.menu-item a[href="/home"]:hover #nav-home{
    background-image: url("/site/img/icon_home_purple.png");
}

您可以在 JSFiddle 查看我的代码的完整版本.

感谢所有帮助!谢谢!

Answer 1

这是我更新的 fiddle :https://jsfiddle.net/cameronjonesweb/a5rso6xy/2/

这是我做的

将.menu-item设置为position:relative

在您的媒体查询中，将您的 .menu-item span 设置为此

.menu-item span {
    position: absolute;
    top: 100%;
    white-space: nowrap;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

这会从对象流中取出 span 并将其居中放置在图标下方。

从 .menu-item div 中删除该高度