How to fix flickering on hover replacing text

问题: If mouse on text as hover flickering text. div { position: absolute; font-size: 40px; color: black } .new { opacity: 0; visibility:hidden; } .old:ho...

问题:

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


回答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.


回答2:

You can try this

    div {
        font-size: 40px;
        color: black
    }

    .new {
      display: none;
    }

    .old:hover + .new {
      display: block;
    }

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

  • 发表于 2018-12-25 15:50
  • 阅读 ( 180 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除