Ведение размеров списка с помощью CSS Переход

Question

Я пытаюсь создать эффект с элементами списка в неупорядоченном списке.

В принципе, в любое время один нависает над списком, размер регулирует 2px в прокладке. В то время как это правильно, это также влияет на габаритные размеры элемента списка, таким образом, нажав другие элементы списка вправо и нажав div beaneath down 2px. Кто-нибудь знает, как решить эту проблему?

Все, что я хочу, чтобы элемент списка во время зависания состоял в том, чтобы увеличить наложение на 2px без каких-либо других элементов вокруг него.

Вы можете найти код на jsfiddle here, а также ниже:

HTML

<div id="info"> 
    <ul class="projects"> 
     <li class="site wmhr"><a href="#">$</a> 
      <p>What's My Hourly Rate</p> 
     </li> 
     <li class="site proud"><a href="#">P</a> 

      <p>PROUD</p> 
     </li> 
     <li class="site mdy"><a href="#">M</a> 

      <p>Manda Dougherty Yoga</p> 
     </li> 
     <li class="site rr"><a href="#">R</a> 

      <p>Responsive Resume</p> 
     </li> 
     <li class="site dp"><a href="#">D</a> 

      <p>designpairs (in progress)</p> 
     </li> 
    </ul> 
</div> 

CSS

.projects { 
    margin: 0; 
    padding: 0 0 50px 0; 
} 
.projects li { 
    display: inline-block; 
    list-style: none; 
    width: 70px; 
    height: 70px; 
    margin: 50px 20px 20px 0; 
    border: 4px solid #555; 
    border-radius: 50%; 
    font-size: 2em; 
    text-align: center; 
    line-height: 70px; 
    background: #414141; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 
.projects p { 
    font-size: .850rem; 
    line-height: 1.500em; 
} 
.projects li:hover { 
    padding: 2px; 
    display: inline-block; 
    list-style: none; 
    border-radius: 50%; 
    line-height: 71px; 
} 
.projects li a { 
    font-family:'Montserrat', sans-serif; 
    color: #fff; 
    text-decoration: none; 
} 
.wmhr:hover { 
    background: #66CC6E; 
    border: 4px solid #57ac5e; 
} 
.proud:hover { 
    background: #5882c2; 
    border: 4px solid #4b6da2; 
} 
.mdy:hover { 
    background: #fec601; 
    border: 4px solid #ddad03; 
} 
.rr:hover { 
    background: #797b96; 
    border: 4px solid #606176; 
} 
.dp:hover { 
    background: #475161; 
    border: 4px solid #38404d; 
} 

Answer 1

Если вы не хотите деталь двигаться, то есть чтобы противодействовать заполнению с уменьшением какого-либо другого измерения или изменить структуру макета, чтобы не использовать встроенный макет.

Вот версия вашего jsFiddle, которая использует уменьшение поля, чтобы противодействовать увеличению заполнения. Зависший элемент увеличивается, но другие предметы не перемещаются.

.projects li:hover { 
    padding: 2px; 
    display: inline-block; 
    list-style: none; 
    border-radius: 50%; 
    line-height: 71px; 
    margin: 48px 18px 18px 0; 
} 

Заметь, я также изменил по умолчанию левого поля, чтобы быть 2px, так что я мог бы сократить его до 0 здесь, как я ненавижу, используя отрицательные поля (иногда они вызывают объекты перекрываются, которые могут ввести неожиданное поведение).

http://jsfiddle.net/jfriend00/6jjcg/

Answer 2

Я хотел бы использовать CSS преобразования собственности, а не добавлять отступы и настройки вокруг него.

.projects li:hover { 
    transform: scale3d(1.2,1.2,1); 
} 

Используя scale3d, а не просто потому, что scalescale3d использует аппаратное ускорение. Вы также хотите добавить префиксы -webkit и -moz для лучшей совместимости.

jsFiddle example