3

我正在应用导致<li>放大的过渡悬停效果。

问题是last childon 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/

4

6 回答 6

2 
        body {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 985px;
            min-height: 500px;
            margin: 0 auto;

        }

        ul #fourbox {
            list-style-type: none;
            display: block;
        }

        #fourbox li {
            display: inline-block;
            width: 188px;
            height: 213px;
            margin: 15px 10px;
            padding: 15px;
            background: #F1F1F2;
            border: 1px solid #D1D2D4;
            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;
        }
    </style>
</head>
<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> 
</html>

. 只是做了一些改变和它的工作

于 2013-09-25T19:42:46.347 回答
2

删除“float:left”并将“display:block”替换为“display:inline-block”...

#fourbox li {
    display: inline-block;
    width: 188px;
    height: 213px;
    margin: 15px 10px;
    padding: 15px;
    background: #F1F1F2;
    border: 1px solid #D1D2D4;

    box-shadow: 0px 0px 0px #888888;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
}

小提琴：http: //jsfiddle.net/aasthatuteja/sAmxE/

希望对你有用！

于 2013-09-25T19:38:32.983 回答
2

这是一种解决方案：

jsFiddle在这里

display:inline-block相对于使用float:left

#fourbox li {
    width: 188px;
    height: 213px;
    margin: 15px 10px;
    padding: 15px;
    background: #F1F1F2;
    border: 1px solid #D1D2D4;
    display:inline-block;                     /* ADD THIS <<< */
    box-shadow: 0px 0px 0px #888888;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
}

clear:both或者，如果您需要浮动它们，您也可以使用。

两种解决方案都有效。不过小动画不错！

于 2013-09-25T19:35:23.253 回答
1

为什么不使用 CSS 变换而不是使用实际的宽度和高度！他们很整洁:)

transform:scale(1.1);

或用于 webkit

-webkit- transform:scale(1.1);

它不会影响正常流程并且易于实施:) 让我知道这是否适合您！

演示

http://jsfiddle.net/eYCQq/

于 2013-09-25T19:39:02.753 回答
1

看着它，看起来你正试图将它保持在每行 3 个盒子，对吧？如果是这种情况，您可以简单地使用 clear:both; 每组 3 之间。

在这里为我工作。 http://jsfiddle.net/Tzh8b/

<div style="clear:both;"></div>
于 2013-09-25T19:35:40.713 回答
1

你要么需要给元素更多的呼吸空间来获得额外的空间，要么使用 JS 来减少所有 li 的 %（假设它们是 50%s），而不是在 $(this) li 上添加悬停效果，这样当你将鼠标悬停在li 你比减少所有其他 lis 允许它有足够的空间增长。

所以$("li").hover(function() { $("li").css('width','smaller'); $(this).css('width','larger'); });

于 2013-09-25T19:35:49.343 回答