Question

大家都非常乐于助人！

我正在练习我的CSS技能，我认为我会将我的CSS推到极限并为<div>动画制作动画。那么CSS已经让我失望了，我想知道是否有一种简单的方法来实现我在下面使用javascript描述的效果。

<div id="container">
   //on hover div with background img expands in every direction from center acting as border
   <div id="expanding-background">  
      <div id="img-div">   //border's solid-color stroke increases, but size remains same
          <img>
      </div>
   </div>
   //label sits at bottom and drops down as expanding-background expands down.
   <p id="label" style="text-align:centered;">Label</p> 
</div>

使用CSS，我只是简单地操纵了一个解决方案，但只有当我徘徊内部img时它才有效，所以鼠标悬停在边框上只会使扩展背景div工作。标签的动画也出现了类似的问题。是否有一种简单的方法可以通过单个div的悬停来启动多个div的动画？

先谢谢有帮助的人！

Answer 1

$('#yourdiv').bind('hover', function() {
    // Animations to do when hovering. Example:
    #(this).find('#innerDiv').animate('height', '+=200');
}, function() {
    // Animations to do when leaving with the mouse. Example:
    #(this).find('#innerDiv').animate('height', '-=200');
});

使用jquery而不是css？</div>使用鼠标悬停扩展<div>元素的宽度和高度

1 个答案: