3

<li>を拡大するトランジション ホバー効果を適用しています。

問題は、last childこれまでの行にカーソルを合わせると、<li>いくつかのスペースの下にある次の 2 つが右に押し出されることです。

これが起こらないようにする方法はありますか？私はトランジションを使用するのが初めてで、これを修正できるかどうかを確認しようと頭を悩ませてきました。

ありがとう！

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

ここに1つの解決策があります：

ここで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 に答える
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 に答える
1

こう見ると、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").hover(function() { $("li").css('width','smaller'); $(this).css('width','larger'); });

于 2013-09-25T19:35:49.343 に答える