在同一位置悬停时显示 div答案

【问题标题】：Show div on hover on same position在同一位置悬停时显示 div
【发布时间】：2018-02-12 20:31:04
【问题描述】：

我试图在鼠标悬停时显示 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>

【问题讨论】：

你的问题是，如果后面的 div 出现，你不再悬停在前面的 div 上，所以它消失了，所以你再次悬停在前面的 div 上，所以后面的 div再次出现 - 等等令人作呕。如果我是你，我会选择使用 JS 或 JQuery 的 mouseenter / mouseleave 方法
@Tijmen 我认为 JavaScript 也需要，直到我看到下面的答案
@Script47 是的，我什至还没有考虑过仅使用 CSS 的解决方案，这可能更好。
How to make a div disappear on hover without it flickering when the mouse moves?的可能重复

标签： javascript html css css-transitions

【解决方案1】：

它闪烁是因为每次.back 可见时，悬停在 .front 上不再有效。为了解决这个问题，您可以将 .back 的可见性设置为在 .back:hover 上可见，这可以通过对 .back:hover 使用与 .front:hover + .back 相同的 css 样式来完成

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>

【讨论】：

【解决方案2】：

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%;
}
.col: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>

.col:hover > .back {
    opacity: 1;
    visibility: visible;
}

我有一个简单的解决方案。

更改.front:hover + .back => .col:hover > .back。

【讨论】：

【解决方案3】：

问题是当您将 .front div 悬停时，会出现 .back div，所以现在您将悬停在 .back div不是 .front 所以它再次消失，循环继续。要解决此问题，请将悬停效果也添加到 .back div。将transition 添加到.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%;
    transition: 0.2s ease;
}
.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>

【讨论】：

【解决方案4】：

如果您将.back 元素放在.col 元素中，将.front 元素样式移动到.col 元素并将transition 添加到.col 元素中呢？考虑到浏览器的支持，我认为这是一个更好的解决方案。

body {
  margin: 0;
}
.row {
  float: left;
  width: 100%;
}
.col {
  float: left;
  width: 25%;
  position: relative;
  margin: 0 10px 0 0;
  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%;
  transition: all 0.2s;
}
.col:hover .back {
  opacity: 1;
  visibility: visible;
}

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

【讨论】：

@Bergi 但为什么呢？
因为一个是立柱的正面，一个是立柱的背面。背面不是正面的一部分。
@Bergi 是的，你说得对，我已经删除了 .front 元素，现在 .back 是 .col 的一部分。

【解决方案5】：

主要问题是您无法分辨出谁真正“拍摄”了“动画”。 front 和back 都在同一个层级，所以从那个层级是不可能做到的，但是如果你通过父元素射击它，它应该可以工作。

方法如下：

.col:hover .back {
    opacity: 1;
    visibility: visible;
}

【讨论】：