Question

我创建了一个基本菜单，其顶部位于上方，下方位于圆圈内。当悬停在li上时，字体大小会增加，但这似乎会导致下方圆圈出现摆动或抖动。

如何停止此操作并对悬停产生平滑效果？我已将css和html包含在代码段中，以便您可以看到我在说什么。

＆＃13;

#timeline ul {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

ul li {
    position: relative;
    display: inline-block;
    float: none;
    width: 5%;
    max-width: 140px;
    padding: 25px 0;
    transition: all .3s ease;
    box-sizing: border-box;
    text-align: center;
    font-family: alternate-gothic-no-3-d,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 20px;
}

#timeline ul .hovered, #timeline ul li:hover {
    transition: all .5s;
    font-size: 35px;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 21px;
}

#timeline ul li .indicator {
    display: block;
}

#timeline ul li .title:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid #a39688;
    border-radius: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all .3s ease;
}

＆＃13;

<div id="timeline">
<ul class="timeline-list">
                                    <li class="" data-number="1">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="2">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="hovered" data-number="3">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="4">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="5">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="6">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="7">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="8">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="9">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="10">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="11">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                  
                                </ul>
                                
                                </div>

＆＃13;

Answer 1

尝试使.title绝对像我在代码

中所做的那样

＆＃13;

#timeline ul {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
span.title {
     position: absolute;
width: 100%;
text-align: center;
left: 0;
bottom: 20px;
}
ul li {
    position: relative;
    display: inline-block;
    float: none;
    width: 5%;
    max-width: 140px;
    padding: 25px 0;
    transition: all .3s ease;
    box-sizing: border-box;
    text-align: center;
    font-family: alternate-gothic-no-3-d,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 20px;
    height: 80px;
}

#timeline ul .hovered, #timeline ul li:hover {
    transition: all .5s;
    font-size: 35px;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 21px;
}

#timeline ul li .indicator {
    display: block;
}

#timeline ul li:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid #a39688;
    border-radius: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all .3s ease;
}

＆＃13;

<div id="timeline">
<ul class="timeline-list">
                                    <li class="" data-number="1">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="2">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="hovered" data-number="3">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="4">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="5">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="6">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="7">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="8">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="9">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="10">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                    <li class="" data-number="11">
                        <span class="indicator"></span>
                        <span class="title">1861</span>
                    </li>
                                  
                                </ul>
                                
                                </div>

＆＃13;

Answer 2

你有一些问题：

inline blocks不喜欢他们之间的空白
将vertical-align: top;添加到ul li
主要问题是你是否试图用font-size替换填充。在正常li中，它是 25px填充+ 20px字体+ 25px填充，在悬停时它是 12px填充+ 35px字体。
解决方案：删除所有填充，只将line-height: 75px添加到ul li

Here's a working fiddle

如何在悬停时停止圈子上的抖动

2 个答案: