0

これらの 5 つの div があり、マウス ホバー時に親 div を埋めるようにします。これらのコードはありますが、前の div (上の div) をどこにもプッシュしません。

これは HTML コードです。

<div id="photo">
<div id="no1">
        &nbsp;
    </div>
    <div id="no2">
        &nbsp;
    </div>
    <div id="no3">
        &nbsp;
    </div>
    <div id="no4">
        &nbsp;
    </div>
    <div id="no5">
        &nbsp;
    </div>

これはCSSです：

div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}

div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}
4

5 に答える 5

1

これを試して

私は単純なロジックを使用しました。hovered div 以外の他の div に height:0 を適用しただけです。

于 2013-10-01T11:15:28.217 に答える
0

すべての #noX id に同じクラスを指定します。名前は関係ありません。例: .hoverPic。

$( document ).ready(function() {

    $('.hoverPic').each(function(){ /*pick each element */

        $(this).hover(function(){ /* do something on hover */

            $(this).css({ /*set css value */
                'width': '100%',
                'height': '100%'
            });

        });

    });
});
于 2013-09-30T20:49:29.293 に答える
-1

:hover セレクターを親に移動し、その状態の子にスタイルを適用する必要があります。私はあなたの目標について完全に明確ではありませんが、これはあなたがそれをどのようにスタイルするかです. 頑張ってください。さらにサポートが必要な場合はお知らせください:)

div#photo:hover > div{
    height:305px;
}

デモ http://jsfiddle.net/59Uph/

編集

このhttp://jsfiddle.net/59Uph/2/の行に沿って何かを試してください

于 2013-09-30T20:38:41.780 に答える