Question

我有几个方块彼此相邻。在悬停时，我希望方块只是增加宽度和（高于下一个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 My jsiddle is here 单击“事件”链接以激活悬停效果。

Answer 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 div上添加.child事件侦听器。悬停时，它会延伸高度。通过这种方式，你不会看到转变。当然，不要错过.child div的颜色和造型，因为那是你将要看到的那个。

请告诉我这是否足够清楚。

避免在jQuery悬停时转移div

1 个答案: