Question

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

问题是永远行上的last child，当悬停在上面时，将下一个<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/

Answer 1

这是一个解决方案：

jsFiddle here

使用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。

两种解决方案都有效。虽然很棒的小动画！

Answer 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/

希望对你有用！

Answer 3

        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>

。只做了一些改变和工作

Answer 4

看着它，看起来你正试图将它保持在每行3盒，对吧？如果是这种情况，你可以简单地使用一个明确的：两者;每组3之间。

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

<div style="clear:both;"></div>

Answer 5

你需要为这个额外的空间赋予元素更大的喘息空间，或者使用JS来减少所有li的％（假设它们是50％s）并且在$（this）li上添加悬停效果所以当你将鼠标悬停在你身上，而不是减少所有其他lis，以便有足够的空间让它成长。

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

Answer 6

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

transform:scale(1.1);

或webkit

-webkit- transform:scale(1.1);

它不影响正常流程并且易于实现:)请告诉我这是否适合您！

<强>样本

http://jsfiddle.net/eYCQq/

浮动左<li> +过渡高度=问题</li>

6 个答案: