Question

:before已使用.box覆盖了完整的position: absolute，因此可以点击完整的框。如果我将鼠标悬停在.box的任何位置，则a应该悬停。如果transform被删除，这样可以正常工作。链接在transform: scale(1.2)上有:hover。这让它闪烁。

如果删除了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

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

我们可以做的第一件事是给伪元素一个背景颜色，以便我们可以看到发生了什么。我们也将它移到一边，因为颜色将涵盖所有内容。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

当您将鼠标悬停在伪元素上时，您会看到它会改变形状并进行物理移动。这似乎是由于变换，因为伪元素是一个孩子，并且会受到应用于它的父母的样式的影响。

更确切地说，发生了什么是重复循环：

将鼠标悬停在伪元素
将悬停动画应用于父级和子级
伪元素移动光标
悬停动画结束
伪元素返回其原始位置
返回第一步

转换似乎创建了new stacking order & context。这就是为什么子元素的定位被重置的原因。到目前为止，我无法提出解决方法。

一个非常简单的解决方案是远离整个主题并将您想要点击的区域包装到它自己的锚标签中。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

我无法找到这个问题的原因。但是，能够以不同的方式解决问题。

添加了:after a的相同大小，并在之后执行了悬停操作。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

悬停时的闪烁问题：因为转换

2 个答案: