如何修复悬停更换文本的闪烁

Question

如果鼠标在文本上是悬停闪烁的文本。

div {
    position: absolute;
    font-size: 40px;
    color: black
}
.new {
    opacity: 0;
    visibility:hidden;
}
.old:hover  {
    opacity: 0;
    visibility:hidden;
}
.new:hover {
    opacity: 1;
    visibility: visible;
}
<div class="old">Old</div>
<div class="new">New</div>

如果鼠标悬停（请不包装器），我如何显示新文本？ JSFIDDLE上的代码

Answer 1

您可以简单地使用：替换文本

之后

div {
    position: block;
    font-size: 40px;
    color: black
}
.old:after{
    content:'old';
}
.old:hover:after{
    content:'new';
}

<div class="old"></div>

编辑
我认为您一直在问旧必须在悬停和 new 上消失，即使在悬停效果之后也必须永远保持。
这可以通过过渡效应来完成。这次，我使用Z-Index寻求Allan Jebaraj的答案，并改变了不透明度的过渡效果。

div {
  position: absolute;
  font-size: 40px;
  color: black
}
.new {
  opacity: 0;
  transition: opacity 9999s;
}
.old {
  z-index: 1;
  transition: opacity 9999s;
}
.old:hover {
  opacity: 0;
  transition: opacity 0s;
  
}
.old:hover+.new {
  opacity: 1;
  transition: opacity 0s;
}

<div class="old">old</div>
<div class="new">new</div>

我认为这就是您要问的。将过渡时间设置为尽可能大，以确保它们不会在用户停留时恢复正常。

Answer 2

您可以尝试此

    div {
        font-size: 40px;
        color: black
    }
    .new {
      display: none;
    }
    .old:hover + .new {
      display: block;
    }

Answer 3

您必须设置类.old的z-index并使用相邻的同级选择器隐藏old类并显示.new类。

请参阅下面的JSFIDDLE。

jsfiddle链接

div {
  position: absolute;
  font-size: 40px;
  color: black
}
.new {
  opacity: 0;
}
.old {
  z-index: 1;
}
.old:hover {
  opacity: 0;
}
.old:hover+.new {
  opacity: 1;
}

<div class="old">Old</div>
<div class="new">New</div>