JQuery/CSS - 需要帮助调试动画内容答案

【问题标题】：JQuery/CSS - Need help debugging animated contentJQuery/CSS - 需要帮助调试动画内容
【发布时间】：2011-07-16 01:17:30
【问题描述】：

我在实验布局方面遇到了一些问题，我需要一双新的眼睛来看看我的代码并帮助我找出我做错了什么。

我有一个网站： http://digitaldesignery.com/new2/

当您将鼠标悬停在菜单项上时，jquery 脚本会更改项目的高度（我在 stackoverflow 其他地方找到的脚本的修改版本）：

jQuery(function( $ ){
$(".navitem").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height + 25});
}, function() {
    $(this).stop().animate({ height: $.data(this,'size').height});
});

});

问题是它下面的内容也会移动，我不希望它移动。我明白它为什么会移动，但是在尝试了各种定位方式之后，我就是不知道如何让它保持不动。

我正在使用 1140 css 网格样式，并不能真正改变我的 HTML 的核心结构。

我的自定义 css 在 style.css 的顶部

谢谢！

【问题讨论】：

标签： jquery html css

【解决方案1】：

在您的style.css 中添加height 到您的#nav

#nav {
float: right;
height: 150px;
}

【讨论】：

哇——我想太多了，谢谢！

【解决方案2】：

您有 25 像素的填充，悬停时的最大高度为 125 像素。因此，如果您将导航或行的高度设置为 150 像素，您应该没问题。但是，这会使您向下移动的文本。

你应该改变

.row-content{
    padding-top:5 em;
}

如果您不希望它被移位，可以放到更低的位置。

【讨论】：