Question

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

它发生在当前的Firefox＆amp; 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;
}

Answer 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/

为什么背景会在悬停时闪烁

1 个答案: