问题:
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>