为什么悬停时背景闪烁答案

【问题标题】：Why does background flicker on hover为什么悬停时背景闪烁
【发布时间】：2016-03-13 03:27:28
【问题描述】：

我有下面的 HTML 和 CSS。当我将图像悬停时，它的不透明度变为零，并且在文本从display:none 变为block 时出现背景颜色。但是为什么悬停文本时会闪烁？我尝试在所有元素上设置backface-visibility:hidden，但它并没有消除闪烁。

它发生在当前的 Firefox & Chrome 和 IE11 中。

这里是codepen demo的问题

<div class="project-card">
<a href="#"><img  src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380"></a>
<div class="project-caption">
<div class="pc-name">Absolut Vodka</div>
<div class="pc-type">Bottle</div>
<div class="pc-task">Fancy text</div>
</div>
</div>

.project-card {
  position: relative;
  display: inline-block;
  text-align: center;
  max-width: 32%;
  background-color: #0a3837;
}
.project-card p,
.project-card a,
.project-card img {
  margin: 0;
}
.project-card a {
  max-width: 100%;
  line-height: 0;
}
.project-card a:hover {
  opacity: 0.1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.project-card a:hover + .project-caption {
  display: block;
}

.project-caption {
  display: none;
  color: white;
  font-size: 0.9rem;
  padding: 0 3rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pc-name {
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 2px solid white;
}

.pc-type,
.pc-task {
  font-style: italic;
}

【问题讨论】：

与此处相同的原因：stackoverflow.com/a/11071917/1139697。一旦您将鼠标悬停在a 上，.project-caption 就会显示出来，因此您不再将鼠标悬停在 a 上，因此 .project-caption 会被隐藏，因此您再次将鼠标悬停在 a 上……
是的 Zeta 是正确的，背面可见性与它无关，你应该删除它。
@zeta 谢谢！但我可能很愚蠢，因为我不明白为什么当我悬停.project-card 而不是a 时同样不适用？ a 是 .project-card 的孩子，而它是 .project-caption 的兄弟姐妹？

标签： css flicker

【解决方案1】：

这里有一个基于 Zeta 所说的解决方案：

HTML

<div class="project-card">
  <a href="#"><img  src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380"></a>
  <div class="project-caption">
    <div class="pc-name">Absolut Vodka</div>
    <div class="pc-type">Bottle</div>
    <div class="pc-task">Fancy text</div>
  </div>
</div>

CSS

.project-card {
  position: relative;
  display: inline-block;
  text-align: center;
  max-width: 32%;
  background-color: #0a3837;
}
.project-card p,
.project-card a,
.project-card img {
  margin: 0;
}
.project-card a {
  max-width: 100%;
  line-height: 0;
}
.project-card:hover > a{
  opacity: 0.1;
}
.project-card:hover > a + .project-caption {
  display: block;
}

.project-caption {
  display: none;
  color: white;
  font-size: 0.9rem;
  padding: 0 3rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pc-name {
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 2px solid white;
}

.pc-type,
.pc-task {
  font-style: italic;
}

还有小提琴：https://jsfiddle.net/rf09bsse/

【讨论】：

我会在这个答案中添加一个 sn-p。上面 Adrien 的代码适用于我在 Windows 8.1 上为 Chrome 测试的所有浏览器和操作系统。 a 上的不透明度更改不会影响其子 img。我必须为图像添加 .project-card img {opacity: inherit;} 以更改不透明度和显示的背景颜色。在 Adrien 的小提琴中，情况并非如此，但在我的开发网站上却是这样，我无法确定为什么会这样。但无论如何，如果有人遇到同样的问题，请查看不透明度继承。