CSS Transition zur anderen Klasse

Hallo,

Ich habe folgende CSS in einem anderem Forum gefunden.

Index.html

<nav>

<li>

<a class="english">English text here</a>

<a class="japanese">Japanese text here</a>

</li>

</nav>

Css:

li .japanese { display: none; }

li:hover .english {display: none;}

li:hover .japanese {display: block; }

Das soll bezwecken das wenn man mit der Maus darüber fährt der Inhalt des Textes sich in einen japanischen Text ändert. Das funktioniert auch soweit.

Ich möchte aber nun das der Wechsel nun "weich" erfolgt. Also mit einer Transition dazwischen. Das haut aber irgendwie nicht hin. Der Wechsel erfolgt trotzdem wieder "hart"

Zitat von Sempervivum

Ein weiches Überblenden kannst Du mit diesem CSS erreichen:

Code

        li {
            position: relative;
        }

        li .english {
            opacity: 1;
            transition: opacity 1s;
        }

        li .japanese {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s;
        }

        li:hover .japanese {
            opacity: 1;
        }

        li:hover .english {
            opacity: 0;
        }

Alles anzeigen

Vielen Dank. Das hat bestens geklappt