Web-Frontend
HTML-Tutorial
Wie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?
Wie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?
Die Aufgabe, die wir in diesem Artikel durchführen werden, besteht darin, wie Schriftarten angezeigt werden, wenn man mit der Maus über ein Bild fährt. Lassen Sie uns in diesen Artikel eintauchen und einen kurzen Blick auf Hover und Mouseover in HTML werfen.
Dasonmouseover -Ereignis in HTML wird ausgelöst, wenn der Mauszeiger ein Element berührt. Wenn der Mauszeiger ein Element verlässt, tritt ein Ereignis namens onmouseout auf.
Die CSS-Pseudoklasse :hover stimmt überein, wenn der Benutzer mit einem Zeigegerät mit einem Element interagiert, sie ist jedoch nicht immer aktiviert. Normalerweise wird es aktiviert, wenn der Benutzer mit dem Cursor über das Element fährt (Mauszeiger).
Grammatik
Hier ist die Syntax für hover -
:hover
Um die Anzeige von Schriftarten besser zu verstehen, wenn Sie mit der Maus über ein Bild fahren, schauen wir uns das folgende Beispiel an.
Beispiel
Im Beispiel unten machen wir die Schriftart sichtbar, wenn die Maus über das Bild bewegt wird.
<!DOCTYPE html>
<html>
<body>
<style>
.img {
position: relative;
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
.img div{
position: absolute;
bottom: 0;
right: 0;
background: black;
color: white;
margin-bottom: 5px;
visibility: hidden;
}
.img:hover{
cursor: pointer;
}
.img:hover div{
width: 150px;
padding: 8px 15px;
visibility: visible;
opacity: 0.7;
}
</style>
<div class="img">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Wie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?" >
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Wie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?" >
<div>TP JAVA LOGO</div>
</div>
</body>
</html>Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die das Bild auf der Webseite anzeigt. Wenn der Benutzer mit der Maus über das Bild fährt, wird eine Textbeschreibung dieses bestimmten Bildes auf der Seite angezeigt.
Beispiel
Im folgenden Beispiel lassen wir die Schriftart erscheinen, wenn die Maus über das Bild bewegt wird, und bedecken das gesamte Bild.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
position: relative;
max-width: 500px;
}
.tutorial img { width: 100%; }
.fulltext {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
text-align: center;
padding-top: 30%;
background-color: #EAFAF1 ;
color: black;
}
.fulltext {
visibility: none; opacity: 0;
transition: opacity 0.3s;
}
.tutorial:hover .fulltext {
visibility: visible; opacity: 1;
}
</style>
<div class="tutorial">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" src=https://www.tutorialspoint.com/java/images/java-mini-logo.jpg alt="Wie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?" >
<div class="fulltext">
LEARN JAVA...!<br>
</div>
</div>
</body>
</html>Wenn Sie das obige Skript ausführen, wird ein Ausgabefenster angezeigt, in dem das Bild auf der Webseite angezeigt wird. Wenn der Benutzer mit der Maus über das Bild fährt, wird Text angezeigt, der das gesamte Bild abdeckt.
Beispiel
Führen Sie den folgenden Code aus und beobachten Sie, wie die Schriftart angezeigt wird, wenn Sie mit der Maus über das Bild fahren.
<!DOCTYPE html>
<html>
<body>
<style>
div {
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
text-align: center
}
img {
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%
}
img:hover {
opacity: 0;
transition:opacity 2s;
}
heading {
line-height: 40px;
font-weight: bold;
text-align: center;
position: absolute;
display: block
}
div p {
width: 420px;
line-height: 20px;
display: inline-block;
padding: 200px 0px;
vertical-align: middle;
height: 450px
}
</style>
<div>
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" alt="Wie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?" >
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>Wenn das Skript ausgeführt wird, öffnet sich ein Ausgabefenster, sodass das Bild als Kreis auf der Webseite erscheint. Wenn der Benutzer mit der Maus über das Bild fährt, wird der Text angezeigt.
Das obige ist der detaillierte Inhalt vonWie zeige ich die Schriftart an, wenn ich mit der Maus über das Bild fahre?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
Details zum Pfad des Win10-Schriftartordners
Jan 03, 2024 pm 08:37 PM
Bei der Texteingabe fügen viele Freunde gerne ihre bevorzugten personalisierten Schriftarten hinzu, wissen jedoch nicht, wo sich der Schriftartenordnerpfad des Win10-Systems befindet, und können keine Schriftarten hinzufügen. Im Folgenden wird Ihnen der spezifische Ordnerpfad vorgestellt. Pfad zum Win10-Schriftartordner: 1. Klicken Sie auf dem Desktop auf „Dieser PC“. 2. Geben Sie das Systemlaufwerk C ein. 3. Klicken Sie auf den Ordner „Windows“. 4. Ziehen Sie nach unten, um den Ordner „Schriftarten“ zu finden. 5. Sie können die Schriftartenbibliothek aufrufen. Freunde, die weitere Fragen haben, können einen Blick darauf werfen, um mehr über häufige Probleme mit Win10-Schriftarten zu erfahren~
So ändern Sie die Schriftart in Outlook auf einem Apple-Mobiltelefon
Mar 08, 2024 pm 04:46 PM
Wie ändere ich die Schriftart in Outlook auf einem Apple-Mobiltelefon? Öffnen Sie zunächst die Outlook-Software und klicken Sie auf die Datei in der oberen linken Ecke der Benutzeroberfläche. Sie können die Schriftart nach Ihren Wünschen festlegen. Klicken Sie nach Abschluss der Einstellungen auf die Schaltfläche „OK“. Lass uns einen Blick darauf werfen! So ändern Sie die Schriftart in Outlook auf einem Apple-Mobiltelefon 1. Öffnen Sie die Outlook-Software und klicken Sie auf die Option „Datei“ in der oberen linken Ecke der Benutzeroberfläche. 2. Suchen Sie in der angezeigten Liste nach „Optionen“ und klicken Sie zur Eingabe. 3. Klicken Sie auf der linken Seite der Optionsliste auf „Mail“. 4. Wählen Sie als Nächstes „Buchstaben und Schriftarten“. 5. Wenn Sie die Schriftart für neue E-Mails, Antwort-E-Mails oder das Verfassen von E-Mails festlegen möchten, klicken Sie auf die entsprechende Option, um die Einstellungen einzugeben. 6. Stellen Sie die Schriftart nach Ihren persönlichen Vorlieben ein. Klicken Sie nach Abschluss der Einstellung auf OK
So lösen Sie das Problem der Win11-Schriftunschärfe
Jan 13, 2024 pm 09:00 PM
Nach der Aktualisierung des Win11-Systems stellten einige Freunde fest, dass ihre Win11-Schriftarten verschwommen und sehr unbequem zu verwenden waren. Dies kann an einem Fehler in der Systemversion liegen oder daran, dass wir Spezialeffekte aktiviert haben. Mal sehen, wie wir es lösen können. Win11-Schriftarten sind unscharf: Methode 1: 1. Klicken Sie zunächst mit der rechten Maustaste auf diesen Computer und öffnen Sie „Eigenschaften“. 2. Geben Sie dann „Erweiterte Systemeinstellungen“ im entsprechenden Link ein. 3. Klicken Sie dann unter „Leistung“ auf „Einstellungen“, um ihn zu öffnen. 4. Aktivieren Sie unter „Visuelle Effekte“ die Option „Für beste Leistung anpassen“ und klicken Sie zum Speichern auf „OK“. Methode 2: 1. Klicken Sie mit der rechten Maustaste auf eine leere Stelle auf dem Desktop und öffnen Sie „Anzeigeeinstellungen“. 2. Klicken Sie unter „Zoom und Layout“ auf „Zoom“. 3. Klicken Sie dann unter den relevanten Einstellungen auf „Textgröße“.
So ändern Sie die Schriftart von Xiaomi 11_So ändern Sie die Schriftart von Xiaomi 11
Mar 25, 2024 pm 07:26 PM
1. Öffnen Sie die Telefoneinstellungen und klicken Sie auf [Anzeigen]. 2. Klicken Sie auf [Schriftart]. 3. Wählen Sie die gewünschte Schriftart aus oder klicken Sie auf [Weitere Schriftarten], um die App herunterzuladen.
Wie man die Schriftart des vivo-Mobiltelefons vergrößert und wo man sie einstellt
Feb 24, 2024 pm 06:16 PM
Wie kann ich die Schriftgröße des Vivo-Mobiltelefons vergrößern? Wo kann ich die Schriftgröße des Vivo-Mobiltelefons vergrößern, aber die meisten Benutzer wissen nicht, wie sie die Schriftgröße des Vivo-Mobiltelefons einstellen sollen? , der Editor bringt Ihnen grafische Tutorials, wie Sie die Schriftgröße des vivo-Mobiltelefons vergrößern können, interessierte Benutzer kommen und schauen sich um! Tutorial zur Nutzung des Vivo-Mobiltelefons So vergrößern Sie die Schriftgröße des Vivo-Mobiltelefons Wo stellen Sie sie ein? 1. Öffnen Sie zunächst die Funktion [Einstellungen] im Vivo-Mobiltelefon und klicken Sie darauf Funktion [Anzeige und Helligkeit]: 3. Rufen Sie dann die Seite im Bild unten auf und klicken Sie auf den Dienst [Schriftgröße und -stärke]. 4. Schieben Sie schließlich die horizontale Linie im Bild unten, um die Schriftgröße anzupassen.
Detaillierte Erläuterung der Installationsmethode für Win11-Schriftarten
Dec 27, 2023 pm 05:16 PM
Einige Freunde können nach der Installation von Win11-Schriftarten nicht herausfinden, wo ihre Schriftarten installiert sind. Daher können wir in der Personalisierung die Schriftartenverwaltung aufrufen, um den Installationsort der Schriftarten zu ermitteln ein Blick unten. Installationsort für Win11-Schriftarten: 1. Klicken Sie zunächst mit der rechten Maustaste auf eine leere Stelle auf dem Desktop und öffnen Sie die Einstellungen für „Personalisierung“. 2. Geben Sie dann die Installationsverwaltungseinstellungen „Schriftart“ ein. 3. Suchen Sie die gewünschte Schriftart und geben Sie sie ein. 4. Wenn Sie es nicht finden können, können Sie auch direkt oben suchen. 5. Nach Eingabe der Schriftart können Sie den Installationsort der Win11-Schriftart in „Font File“ unter Metadaten sehen. 6. Wenn wir die Schriftart deinstallieren möchten, klicken Sie hier auf Deinstallieren.
Eine effektive Möglichkeit, das Problem der Linux-Schriftunschärfe zu lösen
Jan 08, 2024 pm 11:25 PM
Linux-Schriftarten sind verschwommen. Wie kann ich dafür sorgen, dass die Schriftarten klar angezeigt werden? Werfen wir einen Blick auf das ausführliche Tutorial unten. 1. Schriftartdateien installieren 1. Laden Sie die vom Tool oben bereitgestellte Datei herunter, ziehen Sie die Datei dann auf den Desktop und entpacken Sie sie. Wie in der Abbildung unten gezeigt, liegt die Datei aufgrund der Dekomprimierung in Form eines Ordners vor. 2. Klicken Sie dann mit der rechten Maustaste, ohne auf etwas auf dem Desktop zu klicken, und wählen Sie „Im Terminal öffnen“. Geben Sie im Terminal den Befehl sudodpkg-i ein und drücken Sie die Leertaste. Öffnen Sie die dekomprimierte Schriftartdatei auf dem Desktop und ziehen Sie das Deb-Paket nach dem -i dieses Befehls hinein. Nach dem Drücken der Eingabetaste wird eine Fehlermeldung angezeigt, die darauf hinweist, dass die Abhängigkeit nicht installiert ist. Wenn der Abhängigkeitsfehler angezeigt wird, ist die Befehlseingabe normal, andernfalls handelt es sich um einen falschen Befehl. Neulinge müssen auf Leerzeichen und Großschreibung achten.
So ändern Sie Schriftarten im mobilen QQ-Browser
Apr 07, 2024 pm 06:43 PM
Wie ändere ich die Schriftart im mobilen QQ-Browser? Viele Leute verwenden gerne den QQ-Browser auf Mobiltelefonen. Dieser Browser kann nicht nur schnell Webseiten durchsuchen, sondern auch verschiedene Arten von Dateidaten verarbeiten. Sie können die Schriftart des Browsers entsprechend Ihren Anforderungen festlegen Viele unerfahrene Benutzer wissen immer noch nicht, wie sie die Schriftarten dieses Browsers ändern können. Dieser Artikel gibt Ihnen einen Überblick über die Schritte zum Ändern von Schriftarten im mobilen QQ-Browser und hofft, Ihnen bei der Lösung des Problems zu helfen. Liste der Schritte zum Ändern von Schriftarten im mobilen QQ Browser 1. Schalten Sie das Telefon ein und klicken Sie dann, um „QQ Browser“ zu öffnen (wie im Bild gezeigt). 2. Klicken Sie auf der „Mein“-Seite von QQ Browser auf das „Einstellungen“-Logo in der oberen rechten Ecke (wie im Bild gezeigt). 3. Klicken Sie in den Einstellungen auf „Schriftarteinstellungen“ (wie in der Abbildung gezeigt).
