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>

如果鼠标悬停（请不使用包装纸），我如何显示文本？ Code on JSFiddle

Answer 1

您可以简单地将content与:after一起使用来替换文本

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

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

已编辑
我想您一直在要求旧必须在悬停时消失，而新即使悬停效果也必须永远保留。
这可以通过过渡效果来完成。这次，我使用z-index并更改了不透明度过渡效果来寻求Allan Jebaraj's的答案。

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

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

请参阅下面的JSFiddle。

JSFiddle link

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>

如何解决悬停替换文本时的闪烁

3 个答案: