代码之家 › 专栏 › 技术社区 › Devmix

鼠标滑过时如何将盒子向上移动?

css jquery javascript

Devmix · 技术社区 · 6 年前

我只是在做鼠标悬停的时候,试着把盒子往上移动。我可以用鼠标在每个盒子上移动,但不能让它向上移动。这是我的密码:

body {
  text-align: center;
}
.row {
 padding: 50px 0;
}
.post-item {
 outline: 1px solid red;
 padding: 50px 20px;
 border: 5px solid transparent;
}
.post-item:hover {
 outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
 }

这是我的 LIVE DEMO

3 回复 | 直到 6 年前

Omid Nikrah 6 年前

你应该使用 transform

body {
  text-align: center;
}

.row {
  padding: 50px 0;
}

.post-item {
  outline: 1px solid red;
  padding: 50px 20px;
  border: 5px solid transparent;
  transition: all 200ms ease;
}

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translateY(-3px);
}

Hanif 6 年前

您给出的示例使用了两个CSS属性:

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
  transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}

G Pandurengan 6 年前

  .post-item:hover{transform:translateY(-3%);}

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前