Replace text element with fade animation using only HTML and CSS [duplicate] - html

Question

This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
I'm trying to have a word like "hello" then when you click on it, it fades out and a new word fades in.
Is there any way to do this only using HTML and CSS? If not, I guess I'm going to have to learn javascript and/or jquery.

Answer 1

You can play with selector and html elements trying to achieve wat you want, this is what i made.
I used css pseudo-classes ( here you can find a list of pseudo-classes with relative explanation )
the pseudo-classes are used for detect special states of the elements, like the :hover ( i think the most used ) pseudo-class that detects when the mouse is hover an element.
in this case i used
:focus: That selects the element that has the focus ( like when you click a link, in the moment that you click the link it get the focus same thing when you click and input, so if you click the input it gets the focus.)
:visited: Is used for detect the visited links, unfortunatelly this selector has a special behaviour becouse it can be used for violate the user privacy, so you cannot correctly styles othe elements based on the links that has been visited ( that is what i tried to do here )
<a href="#" id="first">
hello
</a>
<a href="#" id="second">
hello
</a>
<style type="text/css">
#first{
text-decoration: none;
color: black;
opacity: 1;
outline: none;
transition: opacity 1s;
}
#first:visited{
opacity: 0;
}
#first:focus{
opacity: 0;
}
#second:focus{
outline:none
}
#second{
opacity: 0;
text-decoration: none;
color: black;
transition: opacity 1s;
}
#first:focus + #second{
opacity: 1;
}
#first:visited ~ #second{
opacity: 1;
}
</style>
Unfortunatelly as this when the user click another element the previous text comes back

Answer 2

Using transition can solve your problem. This may help you.
By the way, learning JS could be a real asset for web dev ;)

Answer 3

Do You mean something like this?
<span>Hello</span> <span>World</span>
<style>
span { transition: opacity 1s ease; }
span + span,
span:first-child:active { opacity: 0; }
span:first-child:active + span { opacity: 1; }
</style>
Updated according to comment:
<span>Hello</span> <span>World</span>
<style>
span { transition: opacity 1s ease; position: absolute; top: 0; left: 0 }
span + span,
span:first-child:active { opacity: 0; }
span:first-child:active + span { opacity: 1; }
span + span { pointer-events: none; }
</style>
https://codepen.io/Patu/pen/RwNZOoM