使用CSS转换维护列表维度

我正尝试在无序列表中创建列表项的效果。使用CSS转换维护列表维度

基本上，任何时候只要在列表上悬停，大小就会在填充中调整2px。虽然这正确，但它也会影响列表项的整体尺寸，从而将其他列表元素推向右侧，并将div下移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; 
}

来源

2013-05-08 patrick

然后减小我的2px的边距。 'margin：48px 18px 18px-2px;'仍然没有任何意义。 – 2013-05-08 20:25:07

如果您不希望的项目移动，那么你有通过减少其他维度来抵消填充或将布局结构更改为不使用内联布局。

下面是您的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/

来源

2013-05-08 20:23:19 jfriend00

我会用CSS变换属性，而不是添加填充和它周围的调整。

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

使用scale3d而不是简单地scale因为scale3d使用硬件加速。您还需要添加-webkit和-moz前缀以获得更好的兼容性。

jsFiddle example

来源

2013-05-08 20:33:48 aaronburrows

使用CSS转换维护列表维度

回答

相关问题