html - 在 flex-container 下悬停 div 时显示文本

Question

我必须在页面顶部创建一个带有 webfont-icons 的图标导航栏，平铺 3 个部分:

• 左上:图标在左侧对齐
• middle-center:图标在网站中间对齐
• 右上角:图标在右侧对齐

这部分我得工作了。使用以下 HTML ...

<div id="topNavigation">
  <div id="topNavigationLeft">
    <div class="iconButton makeAnIcon" data-icon="&#128584;"><span class="tooltiptext">The funky monkey</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128526;"><span class="tooltiptext">The cool smiley</span></div>
  </div>
  <div id="topNavigationMiddle">
    <div class="iconButton makeAnIcon" data-icon="&#128697;"><span class="tooltiptext">Man rest room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128698;"><span class="tooltiptext">Woman rest room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128702;"><span class="tooltiptext">Water Closet</span></div>
  </div>
  <div id="topNavigationRight">
    <div class="iconButton makeAnIcon" data-icon="&#128699;"><span class="tooltiptext">Mixed up rest room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128700;"><span class="tooltiptext">Baby room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128701;"><span class="tooltiptext">Toilet</span></div>
  </div>
</div>

这是我使用的 CSS:

.iconButton {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

.iconButton:hover {
    color: #ff0000;
}

.iconButton .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.iconButton:hover .tooltiptext {
    visibility: visible;
}

.makeAnIcon:before
{
    font-family: 'Arial';
    content: attr(data-icon);
    font-size:60px;
}

#topNavigation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;   

    position: absolute;
    width: 100%;
    height: 80px;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid;
}

#topNavigationLeft {  
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 100%;

    /* Debug Color */
    /* background-color: rgba(255, 0, 0, 0.2); */
}

#topNavigationMiddle {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    height: 100%;

    /* Debug Color */
    /* background-color: #711e82; */
}

#topNavigationRight {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    height: 100%;

    /* Debug Color */
    /* background-color: rgba(255, 0, 0, 0.2); */
}

查看我的 fiddle :https://jsfiddle.net/schludi/yrgaf6p9/

现在我必须在鼠标悬停时在图标下方显示文本。

我的问题是，它在我使用的 flex-container 下，它不应该影响将在“topnavigation”-div 下添加的更多元素。

当我在右上角时，文本应该与图标左对齐，不会产生滚动条，因为 span 元素太大了。我该怎么做？

Answer 1

首先，对于工具提示，我强烈建议使用插件。您会遇到工具提示离开屏幕(x 或 y)的问题，而您根本无法使用 CSS 检测到这一点。

但是，让我们回答您的问题。因此，如果您有一个出现在另一个元素下方的 div，那么有一个很好的 css 属性可以为您解决这个问题!我看你已经用过了。您可以做的是将 z-index 添加到您想要放在顶部的元素。索引越高，元素的视觉效果就越高。

.iconButton .tooltiptext {
    display:none;
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 9999; /* This is extreme, don't always default to 9999 */
}

只需确保您想要放在顶部的元素的 z-index 高于其他元素。如果它仍然不在顶部，那么父元素可能低于您想要在顶部的其他元素，因此在您的 flex-container 上确保 z-index 低于 .tooltiptext 的父元素