Question

我有这个测试设置。当我将鼠标悬停在“Block 1”上时，它应该在保持完整性的同时进行转换。我看到的是背景颜色正在发生变化。看起来这就是 .blocks：after 元素背景之后的全部内容。（如果我评论说，元素的背景在悬停时不会改变）。

那么，什么可能导致问题？

来源 - https://jsfiddle.net/1k5e2090/6/

body {
  background: #d3d3d3;
}

.blocks {
  display: flex;
  position: relative;
  width: 150px;
  height: 55px;
  margin: 25px;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Helvetica', sans-serif;
  font-size: 20px;
}

.blocks#block1 {
  background: #4BACC6;
  left: 500px;
  top: 200px;
}

.blocks#block2 {
  left: 500px;
  top: -50px;
  background: #9BBB59;
}

.blocks#block3 {
  left: 200px;
  top: -45px;
  background: #C0504D;
}

.blocks:after {
  position: absolute;
  content: '';
  background: #F2F2F2;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  z-index: -1;
}

.blocks#block1:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(75, 172, 198, 0.45);
}

.blocks#block2:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(155, 187, 89, 0.45);
}

.blocks#block3:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(192, 80, 77, 0.45);
}

.blocks#block1:hover {
  transition: 1s ease;
  transform: translate(-100px);
 }

Answer 1

这是因为:after元素上的.blocks行为。 See this fiddle

 .blocks:hover:after { border: 6px solid #fff; background: transparent;  z-index: -2;  }

Answer 2

.blocks {
  border: 7px solid #f2f2f2;
}

我编辑了你的小提琴https://jsfiddle.net/1k5e2090/9/

您已将边框用作：伪元素，这是不必要的。它实际上是在创造问题

Answer 3

代替使用前后使用简单边框并给出框阴影，这是因为你在前后采用绝对位置，所以当一个块在自动采用之前和之后移动时。希望它工作简单地使用块周围的边框，并在问题解决之前和之后删除

使用transform（）时背景更改

3 个答案: