0

いくつかの広場が隣り合っています。ホバーすると、正方形の幅を単純に増やして（次のdivより上に来る）、すべての正方形を左側に移動するのではなく、必要です。私はこれにjQueryを使用しています：

$('.' + c).hover(//'c' is my variable class :`.alpha1` / `.alpha2` / `.alpha3`
    function () {$(this).animate({height:"30%"},500);},
    function () {$(this).animate({height:"22.2287%"},500);});//original height

それは完璧に機能していますが、ボックスをシフトしています。ホバーを削除すると、すべての正方形が元の状態にリセットされます。

私のCSS.boxesクラス：

.boxes,.alpha1 ,.alpha2, .alpha3{
background:rgba(0, 0, 0, .30);
    float:left;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}

編集＃1 私のjsiddleはここ にありますホバー効果をアクティブにするには、イベントリンクをクリックします。

4

1 に答える 1

1

フローティング div 内に、次のような別の div を追加します。

<div class="boxes event1">
   <div class="child">1</div>
 </div>

次のスタイリングを使用します。

.boxes .child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 100px;
}
.boxes {
  //all your styling plus:
  overflow: visible;
}

hoverイベントリスナーを.childdivに追加する必要があります。ホバーすると高さが伸びます。この方法では、シフトが表示されません。もちろん、.childdiv の色とスタイルをお見逃しなく。

これが十分に明確かどうか教えてください。

于 2013-01-07T13:15:59.990 に答える