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"

  • Ein weiches Überblenden kannst Du mit diesem CSS erreichen:

  • PS: Bei dem Verfahren mit absoluter Positionierung wird man mit einem Nachteil konfrontiert: Die Größe des Elternelementes passt sich nicht mehr an die Größe Kindelementes an. Das kann man vermeiden, wenn man beide Elemente mit Gridlayout übereinander legt:

  • Ein weiches Überblenden kannst Du mit diesem CSS erreichen:

    Vielen Dank. Das hat bestens geklappt :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!