Question

HTML

   <div class="blok1" ></div>
   <div class="blok2"></div>
   <div class="blok3"></div>

CSS

.blok1 {    
    background-color: green;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    position: relative;     
}

.blok2 {        
    background-color: blue; 
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    position: absolute; 
    height: 200px;
    width: 300px;
    margin-left: 300px;
    margin-top: -200px;
}

.blok3 {        
    background-color: purple;   
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;    
    position: absolute; 
    height: 200px;
    width: 300px;
    margin-left: 600px;
    margin-top: -200px;
}

Jquery的

$(document).ready(function(){
  $(".blok1").hover(function(){
        $('.blok1').stop().animate({'height': '400px'}, 100);

      }, function(){
          $('.blok1').stop().animate({'height': '200px'}, 100);      
      });

  $(".blok2").hover(function(){
          $('.blok2').stop().animate({'height': '400px'}, 100);
      }, function(){
          $('.blok2').stop().animate({'height': '200px'}, 100);
      });

  $(".blok3").hover(function(){
        $('.blok3').stop().animate({'height': '400px'}, 100);
  }, function(){
          $('.blok3').stop().animate({'height': '200px'}, 100);
      });
});

http://jsfiddle.net/dtadesigns/2263p/

当悬停第二个和第三个div时，它的工作方式与预期的一样。但当你悬停div 1 nmbr 2和nmbr 3移动一个长的第一个！

我一直在尝试很多东西，但似乎无法找到它。

Answer 1

制作blok1 position:absolute并从其他两个中删除margin-top。

http://jsfiddle.net/2263p/1/

Answer 2

为了追求DRY est答案，我提出了以下建议。但是，这确实涉及更改HTML：

<div class="wrapper">
    <div class="blok" id="a"></div><div class="blok" id="b"></div><div class="blok" id="c"></div>
    <!-- whitespace removed between bloks on purpose -->
</div>

这允许以下CSS，现在使用display: inline-block和vertical-align:top来实现您想要的结果：

.wrapper {
    white-space: nowrap; // forces all three bloks onto the same line
}
.blok {
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
#a {
    background-color: green;
}
#b {
    background-color: blue;
}
#c {
    background-color: purple;
}

...通过给方框提供一个公共类，你可以大大简化JavaScript：

$(document).ready(function () {
    $(".blok").hover(function () {
        $(this).stop().animate({ // $(this) always refers to the current blok
            'height': '400px'
        }, 100);

    }, function () {
        $(this).stop().animate({
            'height': '200px'
        }, 100);
    });

});

http://jsfiddle.net/2263p/9/

Answer 3

使用此 CSS

.blok1 {    
background-color: green;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height: 200px;
width: 300px;
position: absolute;     
}

.blok2 {        
background-color: blue; 
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
position: absolute; 
height: 200px;
width: 300px;
margin-left: 300px;
}

.blok3 {        
background-color: purple;   
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;    
position: absolute; 
height: 200px;
width: 300px;
margin-left: 600px;
}

Answer 4

注意事项

position:absolute

1。位置：绝对影响div相对于具有position：relative

的div的最近父级的位置

2.使用position：absolute时，建议使用top，left，right，bottom来定位div。因为绝对元素不在内容流中。

使用正确的约定进行编程将为您节省大量时间。

这是我的解决方案：

http://jsfiddle.net/jchnxu/PG69Z/

动画div高度的困难

4 个答案: