javascript - 使用 jquery 而不是 css 通过鼠标悬停扩展 元素的宽度和高度？

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');
});