Question

我试图在鼠标悬停时显示div，但是它会闪烁，如何在没有任何混蛋的情况下显示/隐藏并顺利过渡？

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

这是代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

它会闪烁，因为每次.back变为可见时，将鼠标悬停在.front上不再有效。要解决此问题，您可以将{。{1}}上显示的.back的可见性设置为.back:hover使用与.back:hover

相同的css样式。

＆＃13;

.front:hover + .back

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

A.

＆＃13;

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

＆＃13;

<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; } =＆gt; .front:hover + .back。

Answer 3

如果您将.load()元素放在.back元素中，将.col元素样式移至.front元素并将transition添加到.col元素，该怎么办？？鉴于浏览器的支持，我认为这是一个更好的解决方案。

＆＃13;

.col

＆＃13;

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

＆＃13;

Answer 4

问题是，当你悬停 .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>

Answer 5

主要问题是你无法分辨谁真正“射击”了“动画”。 front和back都处于同一级别，因此无法从该级别执行此操作，但如果您通过父级元素进行拍摄，它应该可以正常工作。

方法如下：

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

在相同位置悬停时显示div

5 个答案: