Heim > Artikel > Web-Frontend > 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?

WBOYnach vorne: 2023-09-13 08:09:022874Durchsuche

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.

Das

onmouseover -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='https://www.tutorialspoint.com/html/images/html-mini-logo.jpg'    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='https://www.tutorialspoint.com/java/images/java-mini-logo.jpg'    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=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="https://www.tutorialspoint.com/static/images/logo-color.png" 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!

css html 指针事件伪类

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Skript ausführen, wenn die Datei zum Abspielen in HTML bereit ist?Nächster Artikel：Skript ausführen, wenn die Datei zum Abspielen in HTML bereit ist?

In Verbindung stehende Artikel

Mehr sehen