Question

我在实验布局方面遇到了一些麻烦，我需要一双新眼睛来看看我的代码并帮助我弄清楚我做错了什么。

我有一个网站： 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 gridstyle，我实际上无法更改HTML的核心结构。

我的自定义css位于style.css

的顶部

谢谢！

Answer 1

在style.css添加height到#nav

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

Answer 2

您的填充量为25像素，悬停时的最大高度为125像素。因此，如果您将nav或行的高度设置为150px，那么您应该没问题。然而，这会取代您向下的文本。

你应该改变

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

如果你不想让它被取代，可以选择更低的价格。

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

2 个答案: