javascript - 悬停在同一位置时显示 div

Question

我试图在鼠标悬停时显示 div，但它在闪烁，我该如何显示/隐藏而不会出现任何抖动并平滑过渡？

我也尝试过使用 jquery 淡入/淡出，但仍然闪烁。

这是代码

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back {
	opacity: 1;
	visibility: visible;
}

<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
</div>

Answer 1

它闪烁是因为每次 .back 变得可见时，悬停在 .front 上不再有效。要解决此问题，您可以将 .back 的可见性设置为在 .back:hover 上可见，这可以通过对 .back:hover 使用与 .front:hover + .back

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back,
.back:hover {
	opacity: 1;
	visibility: visible;
}

<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
</div>