logo标签列表

在同一位置悬停时显示div

javascripthtmlcsscss-transitions
8

我想在鼠标悬停时显示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
@Tijmen 我原以为需要 JavaScript，直到我看到下面的答案。 - Script47
@Script47 是的，我甚至还没有考虑过仅使用CSS的解决方案，这可能更好。 - Tijmen
1
可能是重复的问题：如何在鼠标悬停时使div消失，而不会在鼠标移动时闪烁？ - DanteTheSmith
5个回答
10

闪烁是由于每次 .back 可见时，对 .front 的悬停就不再有效。为了解决这个问题，您可以在 .back:hover 上设置 .back 的可见性，这可以通过使用与 .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>

3

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。
1
如果将.back元素放置在.col元素内，将.front元素的样式移动到.col元素中，并在.col元素中添加transition，那么在浏览器支持方面，我认为这是更好的解决方案。 

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 但是为什么？ - sergdenisov
因为一个是列的正面，另一个是列的背面。背面不是正面的一部分。 - Bergi
@Bergi，是的，你说得对，我已经删除了.front元素，现在.back是.col的一部分。 - sergdenisov
1
问题在于当你悬停在 .front div 上时，.back div 就会出现，因此现在你正在悬停在 .back div 上而不是 .front，所以它再次消失，循环继续。 要解决此问题，请将悬停效果添加到 .back div 中。 为了实现平滑的效果，请在 .back 中添加 transition。 

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>

0
主要问题是您无法确定谁真正“播放”这个“动画”。因为前端和后端处于同一级别，所以无法从该级别进行操作，但如果通过父元素对其进行操作，则应该可以解决。
解决方法如下：
.col:hover .back {
    opacity: 1;
    visibility: visible;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接