Versuchen, versteckten Text auf Hover - über den Text zu enthüllen

Question

Ich komme gleich auf den Punkt. Was ich tun möchte, ist einfachen Text zu erstellen, wie zum Beispiel: © 2017, das wird geändert (bei Hover) zu developed by Jonathan Doe. Ich möchte, dass das Aktivierungsfeld kleiner ist als das Deaktivierungsfeld, aber das Problem ist, dass die Hitbox für die © 2017 die Größe des versteckten Elements ist.

Ich suchte lange nach der Lösung im Internet, aber alles, was ich fand, war Knopf mit nicht flexibler Breite. Vielleicht muss ich einen Tooltip verwenden, der den passiven Zustand abdeckt? Ich bin nicht sicher.

Ich möchte dieses Element im unteren linken Kornett der Website schweben, deshalb setze ich Position zu fixed.

Das andere Problem ist, dass, wenn Text developed by Jonathan Doe aktiv ist, Deaktivierung Feld ist größer als es sein sollte. Es sieht so aus, als würden Elemente mit einer Deckkraft von 0 meine Hitboxen durcheinander bringen. Ich habe versucht, mit display: none; zu spielen, aber dann wird keine Animation abgespielt.

Ich habe gestern angefangen, wörtlich zu programmieren, also bitte vergib mir für alle noob Fehler. Ich versuche die Logik dahinter zu verstehen.

Ich habe das Stück Code hinzugefügt, ich hoffe, ich habe es richtig gemacht.

.con { 
 
    position: fixed; 
 
    font-weight: normal; 
 
    color: #000000; 
 
    font-family: 'Roboto', sans-serif; 
 
    z-index: 99; 
 
} 
 

 

 
/* © 2017 */ 
 

 
.con.copyright:before { 
 
    position: fixed; 
 
    padding: 9px 16px 7px 16px; 
 
    bottom: 16px; 
 
    left: 16px; 
 
    font-size: 14px; 
 
    line-height: 26px; 
 
    text-align: left; 
 
    content: '© 2017'; 
 
    opacity: 1; 
 
    transition: all 0.3s cubic-bezier(.64, 0, .36, 1); 
 
} 
 

 
.con.copyright:hover:before { 
 
    opacity: 0; 
 
    bottom: 32px; 
 
} 
 

 
.con.copyright:after { 
 
    position: fixed; 
 
    padding: 9px 16px 7px 16px; 
 
    bottom: 0px; 
 
    left: 16px; 
 
    font-size: 14px; 
 
    line-height: 26px; 
 
    text-align: left; 
 
    content: 'developed by Jonathan Doe'; 
 
    opacity: 0; 
 
    transition: all 0.3s cubic-bezier(.64, 0, .36, 1); 
 
} 
 

 
.con.copyright:hover:after { 
 
    opacity: 1; 
 
    bottom: 16px; 
 
}

<div class="con copyright"></div>

Ich mag nicht, wie Sie developed by Jonathan Doe Text aktiv durch schnelles Bewegen Sie die Maus über sie halten können.

Answer 1

Ich brauchte ein paar zusätzliche Tage, aber ich denke, ich habe es endlich getan. Hitboxen sind perfekt. Das einzige Problem besteht nun darin, dass Text aus einem unbekannten Grund nicht antialiasiert wird. Ich spielte mit einigen Werten, aber nichts half.

EDIT: Ich habe mit besserer Version herausgekommen. Weniger unordentlich und mit Antialiasing.

Hier ist die neue Version - vielleicht einige Anfänger wie ich finden dies nützlich. Ich werde es aktualisieren, wenn ich etwas entdecken neue:

EDIT: Ich habe: • hinzugefügt transition-delay und umgekehrt, so dass es Wirkung richtig auf "mouseout"

EDIT gespielt wird: Ich habe: • ersetzt visibility: hidden; mit pointer-events: none; weil mit größeren transform: translateY Werte "mouseout" war glitchy • transition: all-transition: transform, opacity geteilt und entfernt transition-delay eine bessere Kontrolle über Verzögerungen zu bekommen

EDIT: Kleinere Anpassungen für eine bessere UX

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
/* copyright */ 
 

 
.copyright { 
 
\t position: fixed; 
 
\t color: #000000; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-size: 14px; 
 
\t left: 16px; 
 
\t top: 16px; 
 
\t text-align: left; 
 
\t width: 78px; 
 
\t height: 42px; 
 
\t z-index: 10; 
 
} 
 
.copyright:before { 
 
\t pointer-events: none; 
 
\t position: absolute; 
 
\t display: block; 
 
\t top: 13px; 
 
\t left: 16px; 
 
\t opacity: 1; 
 
\t content: '© 2017'; 
 
\t transform: translateY(0px); 
 
\t transition: transform .24s 0s ease, opacity .16s .08s ease; 
 
} 
 
.copyright:hover:before { 
 
\t transform: translateY(-24px); 
 
\t transition: transform .24s 0s ease, opacity .16s 0s ease; 
 
\t opacity: 0; 
 
} 
 
.copyright_ch { 
 
\t position: absolute; 
 
\t opacity: 0; 
 
\t padding: 13px 0px 0px 16px; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t pointer-events: none; 
 
\t width: 205px; 
 
\t transition: transform .24s 0s ease, opacity .16s 0s ease; 
 
\t height: 100%; 
 
\t transform: translateY(24px); 
 
} 
 
.copyright:hover .copyright_ch { 
 
\t opacity: 1; 
 
\t pointer-events: auto; 
 
\t transform: translateY(0px); 
 
\t transition: transform .24s 0s ease, opacity .16s .08s ease 
 
}

<div class="copyright"><div class="copyright_ch">developed by Jonathan Doe</div></div>

Anmerkung: Das ist nicht wirklich eine flexible Lösung. Wenn Sie Inschriften, Schriftgröße, Hitboxen usw. ändern möchten, müssen Sie die Werte manuell ändern und anpassen. Um sich einen Überblick über aktuelle Hitboxen zu verschaffen, fügen Sie background-color: #cccccc; zu .copyright und .copyright_ch Klassen hinzu.Sie können auch mit opacity:0/1 spielen, so dass Sie sehen können, mit was Sie arbeiten.