悬停的闪烁问题:由于变换

Question

:before使用position: absolute覆盖了.box，以便单击完整的框。如果我在.box中的任何位置徘徊，则a应该悬停。如果删除transform，则可以正常工作。链接在:hover上具有transform: scale(1.2)。这使它闪烁。

如果删除了transform。一切都很好。这个问题是在Chrome和Firefox中。

.box {
  height: 400px;
  border: 1px solid #ccc;
  padding: 30px;
  width: 30%;
  position: relative;
}
.box a {
  display: block;
  border: 1px solid #ccc;
  padding: 20px;
}
.box a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.box a:hover {
  background: red;
  transform: scale(1.2);
}

<div class="box">
  <a href="#" class="link">Test</a>
  <h3>test</h3>
</div>

Answer 1

这个很棘手，我不确定我有答案，但我们可以一起研究。

我们可以做的第一件事是给伪元素一种背景颜色，以便我们可以看到正在发生的事情。我们还将其移到一边，因为颜色将覆盖所有内容。

.box {
  height: 400px;
  border: 1px solid #ccc;
  padding: 30px;
  width: 30%;
  position: relative;
}
.box a {
  display: block;
  border: 1px solid #ccc;
  padding: 20px;
}
.box a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 400px;
  bottom: 0;
  right: 0;
  background: red;
  width: 100px;
}
.box a:hover {
  background: red;
  transform: scale(1.2);
}

<div class="box">
  <a href="#" class="link">Test</a>
  <h3>test</h3>
</div>

当您悬停在伪元素上时，您会发现它会改变形状并物理移动。这似乎是由于转换造成的，因为伪元素是一个孩子，并且会受到其父母的样式的影响。

更准确地说，发生的事情是：

的重复循环

1. 您徘徊在伪元素上
2. 悬停动画应用于父母和孩子
3. 伪元素移出光标
4. 悬停动画结束
5. 伪元素返回其原始位置
6. 回到第一步

变换似乎创建了一个新的堆叠顺序＆amp;语境。这就是为什么子元素的定位重置的原因。到目前为止，我无法提出解决方法。

一个非常简单的解决方案是摆脱整个主题，并将要单击的区域包裹在自己的锚标签中。

.box {
  height: 400px;
  border: 1px solid #ccc;
  padding: 30px;
  width: 30%;
  position: relative;
}
a {
  display: block;
}
a:hover .box {
  background: red;
  transform: scale(1.2);
}

<a href="#" class="link">
  <div class="box">
    <h3>test</h3>
  </div>
</a>

Answer 2

我无法找到此问题的原因。但是，能够罚款解决问题的方法。

添加了具有相同大小a的:after，并为悬停操作。

.box {
  height: 400px;
  border: 1px solid #ccc;
  padding: 30px;
  width: 30%;
  position: relative;
}
.box a {
  display: block;
  text-align: center;
  line-height: 20px;
  transition: font-size 0.5s;
  text-decoration: none;
  color: transparent;
}
.box a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.box a:after {
  content: attr(title);
  display: block;
  border: 1px solid #ccc;
  padding: 20px;
  color: #666;
  transition: transform 0.5s;
}
.box a:hover:after {
  transform: scale(1.2);
  background: red;
}

<div class="box">
  <a href="#" class="link" title="View Offer">View Offer</a>
  <h3>test</h3>
</div>