jquery - 尝试使用jquery制作动画时如何定位html元素？

Question

我为我的网站制作了一个div带有背景图片的按钮。我使用 jQuery 为该按钮设置了动画，因此当鼠标悬停在按钮上时，它会向右跳 20px，当鼠标离开时，它会返回到之前的位置。

问题是，当我放大 ( ctrl+ scroll) 时，整个动画变得一团糟。按钮从左到右快速移动，当然不是它应该在的位置。

我使用relative位置和像素单位来定位元素。

我应该如何定位东西？absolute还是relative？像素还是百分比？

score 1 · Accepted Answer

最好的办法是只使用 CSS。它很整洁，做得很好。这是一个演示

img {
    margin-top:20px;
}
img:hover {
    margin-top:10px;
}

score 0 · Accepted Answer

这篇文章解释了绝对和相对，它们有何不同？我的练习wrap我absolute首先relative

例子：

html

<div class="wrap">
  <div class="content">
  </div>
</div>

css

.wrap {
  float:left;
  position:relative
}
.content {
  position:absolute;
  top:10px;
  left:10px
}

2 回答 2