Возврат текста текста CSS к размеру шрифта после завершения

Question

У меня проблемы с переходом текста. У меня есть список с пятью текстов гиперссылка:

<div id="listContainer"> 
<ul id="wordList"> 
    <li class="wordListItem"><a class="wordListLink" href="somewhere1.jsp">Word1</a></li> 
    <li class="wordListItem"><a class="wordListLink" href="somewhere2.jsp">Word2</a></li> 
    <li class="wordListItem"><a class="wordListLink" href="somewhere3.jsp">Word3</a></li> 
    <li class="wordListItem"><a class="wordListLink" href="somewhere4.jsp">Word4</a></li> 
    <li class="wordListItem"><a class="wordListLink" href="somewhere5.jsp">Word5</a></li> 
</ul> 
</div> 

я использую #wordList для удаления пули, то #wordListItem отображать слова инлайн, и #wordListLink делать текстовые переходы и свойство шрифта:

.wordListLink{ 
    line-height: 50px; 
    text-decoration: none; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    color: white; 
    font-size: 40px; 
    margin-right: 30px; 
} 

.wordListLink:link { 
    color: white; 
} 

.wordListLink:visited { 
    color: white; 
} 

.wordListLink:hover { 
    color: #838383; 
    transform: scale(1.1); 
    /*I've tried font-size: 45px but the transition moves the rest of the words over*/ 
} 

И контейнер список, чтобы переместить список на правой стороне:

#listContainer { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

То, что я пытаюсь сделать, это увеличить размер шрифта немного по наведению. Но с преобразованием: масштаб (1.1) текст увеличивается, но как только он заканчивается, он просто возвращается в нормальное состояние, а мышь все еще витает. По какой-то причине она не остается на уровне 1.1. Проблема с использованием font-size: 45px заключается в том, что, во-первых, все большее количество движений перемещает другие слова, чтобы освободить место, а во-вторых, увеличивает шрифт влево и вверх, а не одинаково со всех сторон. У кого-нибудь есть исправление для этого?

Answer 1

Элементы списка не достаточно велики, чтобы разместить текст при наведении указателя мыши.

Вы должны,

1. увеличить width элементов списка,
2. уменьшить font-size изменения (скажем, от 1.35em к 1.4em)
3. добавить право margin.

Сообщите мне, если это поможет!