如何在懸停時停止圓圈上的抖動

Question

我已經創建了一個基本菜單，上面有一個年份，下面是一個圓圈。當懸停在li上時，字體大小會增加，但這似乎會導致下面的圓圈出現抖動或抖動。

我該如何解決這個問題並對懸停產生平滑的影響？我已將我的css和html包含在代碼片段中，以便您可以看到我在說什麼。

#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; 
 
}

<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>

Answer 1

嘗試取得了.title絕對是我在代碼

#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; 
 
}

<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>

Answer 2

你有幾個問題做了：

• inline blocks不喜歡空白，它們之間
• 添加vertical-align: top;到ul li
• 的CSS的主要問題是你要替換的字體大小進行填充。在正常li它是25px填充+ 20px字體+ 25px填充，在懸停它是12px填充+ 35px字體。
• 解決辦法：刪除所有的填充和只添加line-height: 75px到ul li

Here's a working fiddle