当鼠标悬停在另一个 Div 上时为一个 Div 设置动画

Posted 2023-05-08

【中文标题】当鼠标悬停在另一个 Div 上时为一个 Div 设置动画

【英文标题】：Animate one Div when the mouse hovers over another

【发布时间】：2012-01-10 23:38:43

【问题描述】：

当鼠标悬停在页面其他地方的另一个 div 标签上时，我希望为一个 div 设置动画。举个例子……

CSS

#blue-box 
position:absolute;
margin-left:50px;
margin-top:50px;
height:100px;
width:100px;
background-color:blue;



#red-box 
position:absolute;
margin-left:180px;
margin-top:50px;
height:100px;
width:100px;
background-color:red;

HTML

<div id="blue-box"></div>
<div id="red-box"></div>

JavaScript

$(document).ready(function()
    $('#red-box').animate('margin-top': '200px', 1500);
);

我还发了jsFiddle 来提供帮助。

当鼠标悬停在蓝色框上时，如何让动画在红色框上触发？并在鼠标移离蓝色框时反转动画？将红色框返回到它的起始位置。

谁能帮帮我？

【参考方案1】：

这应该可以解决问题：

$(document).ready(function()
    $("#blue-box").hover(function()
        $('#red-box').stop().animate('margin-top': '200px', 1500);
    , function()
        $('#red-box').stop().animate('margin-top': '50px', 1500);
    );
);

需要注意的是，如果给定元素的 DOM 顺序，使用 CSS 可以更轻松地完成此操作，但如果我们将 DOM 元素分开，则该解决方案不灵活。

【参考方案2】：

这也可以在没有 javascript 的情况下完成：

#red-box 
    ...
    transition:margin-top 2s ease-in;


#blue-box:hover + #red-box 
    margin-top:200px;

Demo

【讨论】：

+1 用于提供 CSS3 替代方案。另外，我已对其进行了编辑，因为您两次声明了转换属性。

Flickdraw，您需要使用 -moz- 供应商前缀才能在 Firefox 中工作。这是带有所有供应商前缀的updated demo。

非常好，+1。让多浏览器和旧浏览器 (IE8 + IE7) 友好起来有多容易？

这是最佳答案，以防您要转换的 div 紧跟在触发效果的那个之后。遗憾的是，这个答案不是很灵活，如果 DOM 元素在 DOM 树中混杂一些，那么应该非常注意它的局限性。

【参考方案3】：

这是你想要的吗？ http://jsfiddle.net/4rnLp/7/

【讨论】：

当我将鼠标悬停在蓝色框上时，这不会为红色框设置动画，至少在 Firefox 中不会。

哦，对不起，我想我把盒子弄乱了，将鼠标悬停在红色盒子上它会为蓝色盒子设置动画。我猜你想要的恰恰相反。