How to fix flickering on hover replacing text - html

Question

If mouse on text as hover flickering text.
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>
How i can show text New if mouse hover (without wrapper please)?
Code on JSFiddle

Answer 1

You can simply use content along with :after to replace text
div {
position: block;
font-size: 40px;
color: black
}
.old:after{
content:'old';
}
.old:hover:after{
content:'new';
}
<div class="old"></div>
Edited
I think you have been asking that old must disappear on hover and new must stay forever even after hover effects.
This can be done by transition effects. This time I go for Allan Jebaraj's answer using z-index and altering the opacity transition effects.
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>
I think this is what you are asking. Set the transition time as large as possible to make sure they don't revert back to normal as user stays.

Answer 2

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

Answer 3

You have to set the z-index of the class .old and use the adjacent sibling selector to hide the old class and display the .new class.
Refer the JSFiddle below.
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>