0

我正在尝试使用无序列表中的列表项创建效果。

基本上，只要将鼠标悬停在列表上，大小就会在填充中调整 2px。虽然这正确它也影响了列表项的整体尺寸，因此将其他列表元素向右推，并将 div 向下推 2px。有人知道解决此问题的方法吗？

我希望列表项在悬停期间做的只是将填充增加 2px，而不影响它周围的任何其他元素。

您可以在jsfiddle上找到代码，也可以在下面找到：

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;
}
4

2 回答 2

0

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

这是您的 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-08T20:23:19.570 回答
0

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

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

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

jsFiddle 示例

于 2013-05-08T20:33:48.883 回答