0

基本上我所拥有的是 4 个 div，每个都从一个设定的高度开始，当您将鼠标悬停在它们上时，它们会进行动画处理以使 div 更高，从而完整地显示背景图像，而不仅仅是最初显示的图像的潜伏高峰。你可以看看我在这里得到了什么：

http://jsfiddle.net/u2DK7/

基本上我想要它做的是当您将鼠标悬停在其中一个框上时，它会扩展内容而不是向下推。我曾短暂地尝试过绝对定位，但这似乎不是我所需要的。

我想知道的另一件事是是否有任何方法可以使动画指令工作一次。虽然来回徘徊，然后观看您排队的动画的手风琴风格效果非常酷，但这并不是我真正想要的工作方式！

顺便说一句，我需要保留在 html 代码中的样式标签，这样我就可以在不设置 4 个单独的 div 的情况下更改背景图像！

提前致谢！

4

1 回答 1

0

我选择绝对定位元素，并根据之前的兄弟元素计算它们与左侧的距离。

在这里工作 jsFiddle

jQuery

$.each($('.fourboxes'), function(i,v){
  if(i == 0){
   $(v).css('left', '10px');
  }else{
    var prevDiv = $(this).prev('.fourboxes');
    var pWidth = prevDiv.width();
    var pleft = prevDiv.position().left;
    $(v).css({'left' : pWidth + pleft + 10 +"px"});
  }        
});

CSS

.fourboxes {
    position:absolute;
        left:10px;
    height: 200px;
    width: 139px;
    border:1px solid red;
    background-color:blue !important;

}

于 2012-07-08T04:01:15.417 回答