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 回答