如何在更改字體重量時停止懸停的文本？

我的標準<a>有一個然後懸停改變爲font-weight: 700它會導致文本移動，你如何解決這個問題？

HTML

<ul class="clearfix"> 
    <li><a href="">Testing 1</a></li> 
    <li><a href="">Testing 2</a> </li> 
    <li><a href="">Testing 3</a> </li> 
    <li><a href="">Testing 4</a> </li> 
</ul>

CSS：

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

/* start commented backslash hack \*/ 
* html .clearfix { 
    height: 1%; 
} 

.clearfix { 
    display: block; 
} 

/* close commented backslash hack */ 
ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    background: #c2c2c2; 
    font-family: 'Roboto Slab', serif; 
} 
ul li { 
    float: left; 
    display: block; 
    border-left: 1px solid #eeeff2; 
} 
ul li a { 
    text-decoration: none; 
    font-size: 25px; 
    display: block; 
    padding: 20px; 
    font-weight: 300; 
} 
ul li a:hover { 
    font-weight: 700; 
}

來源

2015-12-09 ifusion

你正在改變文字的大小，這就是爲什麼文本移動。你可以使你的容器稍大一點，你不會注意到文字的增長。 – Dan

好吧，最好的方式來停止文本時刻，同時仍保持相同的懸停效果？ – ifusion

我想你必須有不同的效果，只有當你將鼠標懸停在文本上時，它纔會改變文本的顏色而不是文本的大小 – Dan

-2

也許設置對象（LI）上的寬度？

來源

2015-12-09 20:37:09 Serhiy

試圖避免設置寬度，因爲它是一個動態菜單，所以可以添加不同長度的菜單項。 – ifusion

@ifusion這是什麼，一個測驗？你覺得鼓勵和有用的投票的所有答案？ – Franco

@Franco - 我還沒有投下任何票。這是別人。我只贊成亞當布坎南史密斯的回答。 – ifusion

這是哈克，但因爲你正在改變字的總寬度由於字體越來越厚，你可以由於字體粗細正在改變縮短字母之間的間距這樣

a { 
      text-decoration: none; 
      font-size: 25px; 
      display: block; 
      padding: 20px; 
      font-weight: 300; 

      &:hover { 
       font-weight: 700; 
       letter-spacing: -.2px; 
      } 
     }

來源

2015-12-09 20:39:19

似乎做的伎倆:)謝謝！ – ifusion

就像我說的那樣，這是hacky，我不以我的回答爲自豪:) –

-2

，這個詞的寬度增加，導致它移動。增加非徘徊鏈路中的字母間距可以得到理想的結果。

a { 
     text-decoration: none; 
     font-size: 25px; 
     display: block; 
     padding: 20px; 
     font-weight: 300; 
     letter-spacing: 1.25px; 
     &:hover { 
      font-weight: 700; 
      letter-spacing: 1px; 
     } 
    }

來源

2015-12-09 20:41:04

對不起，我必須由其他答案。我的錯誤

來源

2015-12-09 20:46:06 Franco

如果你願意，你可以通過點擊下面的'刪除'文本來刪除你的答案。 – ebyrob

請勿更改字體重量或字母間距。（當然你可以像使用字體重量和所有東西一樣設置字體的樣式，但不要改變它：hover）。

爲了使文本在鼠標懸停時更加醒目/可見，只需將文本陰影添加到：懸停樣式。這不會移動文本，而只是在其周圍添加邊框。

例如：

text-shadow: 1px 0 black;

或（一個更大膽的風格）：

text-shadow: 1px 0 black, -1px 0 black, 0 -1px black, 0 1px black;

來源

2015-12-09 20:48:19

如何在更改字體重量時停止懸停的文本？

回答

相關問題