Question

我一直在为一个项目试用一些导航效果，但遇到了一些我担心的问题。

首先，过渡时间似乎有些偏离。我的总体愿望是让“工具提示”或链接名称/标签在悬停时滑出，然后在悬停时滑回。想法是使图标的突出显示颜色（在这种情况下为数字）看起来好像只是在扩展和显示单词一样，然后缩小直到全部消失。我尝试了一些时间和延迟的变化，但没有运气。

在使跨度填充链接区域的可用空间/相同高度方面，我也遇到了问题。我更改了跨度颜色以突出显示该区域的差异。

最后，我为链接5输入了一个较长的名称，以使用跨度使用固定/特定宽度来演示限制/问题。我认为无论如何都无法实现我希望的所有功能，并且宽度取决于文本的长度。

这是我的代码（下面的CodePen链接）： HTML：

<body>
    <div class="navigation navbar-fixed-top">
        <div class="navigation container">
            <ul class="navigation nav-left">
                <li><a href="#">1<span class="tooltiptext">Welcome</span></a></li>
                <li><a href="#">2<span class="tooltiptext">Second</span></a></li>
                <li><a href="#">3<span class="tooltiptext">Third</span></a></li>
                <li><a href="#">4<span class="tooltiptext">Fourth</span></a></li>
                <li><a href="#">5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></a></li>
                <li><a href="#">6<span class="tooltiptext">Sixth</span></a></li>
            </ul>
        </div>
    </div>
</body>

CSS：

.navigation::after {
    clear: both;
}

.navigation::before, .navigation::after {
    display: table;
    content: " ";
}

.container::after {
    clear: both;
}

.container::before, .container::after {
    display: table;
    content: " ";
}

.navigation {
    min-height: 50px;
    padding-left: 0;
    padding-right: 0;
    list-style: none;
    z-index: 1;
}

    .navigation > li {
        display: block;
        position: relative;
    }

.nav-right, .nav-right > li {
    float: right;
    margin: 0;
}

.nav-left, .nav-left > li {
    float: left;
    margin: 0;
}

.navbar-fixed-top {
    position: sticky;
    margin-bottom: 20px;
    top: 0;
    border-bottom: 1px solid black;
}

    .navbar-fixed-top::before {
        display: block;
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
        top: -142px;
        background-color: #008ed0;
        background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
    }

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.tooltiptext {
    display: block;
    background-color: #008ed0;
    opacity: 0;
    width: 0;
    color: white;
    margin-left: 10px;
    text-align: center;
    z-index: 1001;
    transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}

.navigation li:hover .tooltiptext {
    width: 150px;
    opacity: 1;
}

body {
    padding-top: 0px;
    padding-bottom: 20px;
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
}

li > a {
    display: inline-flex;
    width: 100%;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;

    fill: white;
}

    li > a:hover, li > a:focus {
        background-color: #d50f67;
        color: white;

        fill: white;
    }

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

任何帮助都将不胜感激。链接到此CodePen，希望有人能提供帮助。

亲切的问候，唐

CSS：过渡时间帮助，包含元素和dynamic（？）宽度的跨度填充

0 个答案: