我正在应用导致<li>
放大的过渡悬停效果。
问题是last child
on ever 行,当悬停在上面时,将下一个 2 推<li>
到右侧几个空格下方。
有什么办法可以防止这种情况发生?我对使用过渡有点陌生,并且一直在绞尽脑汁想看看这是否可以解决。
谢谢!
CSS
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 985px;
min-height: 500px;
margin: 0 auto;
}
ul #fourbox {
list-style-type: none;
}
#fourbox li {
display: block;
width: 188px;
height: 213px;
margin: 15px 10px;
padding: 15px;
background: #F1F1F2;
border: 1px solid #D1D2D4;
float: left;
box-shadow: 0px 0px 0px #888888;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
#fourbox li:hover {
width: 198px;
height: 228px;
margin: 5px 5px;
box-shadow: 0px 7px 10px #888888;
}
HTML
<body>
<div id="wrapper">
<ul id="fourbox">
<li>
<p>1</p>
</li>
<li>
<p>2</p>
</li>
<li>
<p>3</p>
</li>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
<li>
<p>7</p>
</li>
<li>
<p>8</p>
</li>
</ul>
</div>
</body>
参考:http: //jsfiddle.net/aasthatuteja/mVrMH/