使用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轉換維護列表維度

回答

相關問題