suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So implementieren Sie den Inhalt der kleinen Eingabeaufforderung, der angezeigt wird, wenn die Maus in Javascript bewegt wird

So implementieren Sie den Inhalt der kleinen Eingabeaufforderung, der angezeigt wird, wenn die Maus in Javascript bewegt wird

WBOY
WBOYOriginal
2023-05-09 11:53:361149Durchsuche

JavaScript ist eine sehr leistungsfähige Programmiersprache, mit der eine Vielzahl von Funktionen implementiert werden können, einschließlich der Funktion, die Maus in ein kleines Feld zu bewegen, um Inhalte anzuzeigen. In diesem Artikel erfahren Sie, wie Sie diese Funktionalität mithilfe von JavaScript implementieren.

1. HTML-Struktur

Zuerst müssen wir eine HTML-Seite erstellen und einige Elemente hinzufügen, die der Seite hinzugefügt werden müssen. Beispielsweise können wir eine Liste mit einigen Links erstellen. 

<ul>
  <li><a href="#" class="tooltip">Link 1</a></li>
  <li><a href="#" class="tooltip">Link 2</a></li>
  <li><a href="#" class="tooltip">Link 3</a></li>
  <li><a href="#" class="tooltip">Link 4</a></li>
  <li><a href="#" class="tooltip">Link 5</a></li>
</ul>

In diesem Beispiel verwenden wir den Klassennamen „tooltip“, um das Element zu identifizieren, dem Tippinhalt hinzugefügt werden muss.

2. CSS-Stil

Als nächstes müssen wir diesen Elementen CSS-Stile hinzufügen, um beim Bewegen der Maus Eingabeaufforderungen anzuzeigen. Wir können die CSS-Pseudoklasse „:after“ verwenden, um ein Eingabeaufforderungsfeld zu erstellen, und das CSS-Attribut „content“ verwenden, um Eingabeaufforderungstext hinzuzufügen. Zum Beispiel: 

.tooltip {
  position: relative;
}

.tooltip:hover:after {
  content: "This is a tooltip";
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  z-index: 999;
}

In diesem Beispiel verwenden wir das Attribut „position: relative“, um die relative Positionierung des Elements festzulegen, und das Attribut „position: absolute“, um die absolute Positionierung des Tooltips festzulegen . Wir haben auch die Attribute „oben: 100 %“ und „links: 0“ verwendet, um den Tooltip unterhalb des Elements zu platzieren. Wir verwenden auch einige andere CSS-Eigenschaften, um den Tooltip zu formatieren, wie zum Beispiel „padding“, „background-color“, „color“ und „border-radius“.

3. JavaScript-Code

Da wir nun die HTML-Struktur und den CSS-Stil erstellt haben, müssen wir JavaScript verwenden, um die Funktion zum Bewegen der Maus in die kleine Eingabeaufforderung zu implementieren Inhalt. .

Wir können die Funktion addEventListener() von JavaScript verwenden, um auf Ereignisse beim Ein- und Ausfahren der Maus zu warten, und das Stilattribut von JavaScript verwenden, um den Stil des Elements festzulegen. Zum Beispiel: 

var tooltips = document.querySelectorAll('.tooltip');

for (var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mouseover', function() {
    this.style.position = 'relative';
  });
  
  tooltips[i].addEventListener('mouseout', function() {
    this.style.position = '';
  });
}

In diesem Beispiel verwenden wir die Funktion document.querySelectorAll(), um alle Elemente mit dem Klassennamen „tooltip“ auszuwählen, und verwenden die for-Schleife und die Funktion addEventListener() zum Abhören Mausbewegungen bzw. Entfernungsereignisse. Wenn sich die Maus hineinbewegt, verwenden wir das Schlüsselwort this, um die Eigenschaft „position“ des aktuellen Elements auf „relativ“ zu setzen, und wenn sich die Maus herausbewegt, setzen wir die Eigenschaft „position“ auf leer. Während dieses Vorgangs zeigt der Browser das Eingabeaufforderungsfeld entsprechend dem CSS-Stil an oder blendet es aus.

4. Vollständiges Codebeispiel

Schauen wir uns abschließend noch das vollständige Codebeispiel an: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Tooltip</title>
  <style>
    .tooltip {
      position: relative;
    }

    .tooltip:hover:after {
      content: "This is a tooltip";
      position: absolute;
      top: 100%;
      left: 0;
      padding: 5px;
      background-color: #000;
      color: #fff;
      border-radius: 5px;
      z-index: 999;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#" class="tooltip">Link 1</a></li>
    <li><a href="#" class="tooltip">Link 2</a></li>
    <li><a href="#" class="tooltip">Link 3</a></li>
    <li><a href="#" class="tooltip">Link 4</a></li>
    <li><a href="#" class="tooltip">Link 5</a></li>
  </ul>

  <script>
    var tooltips = document.querySelectorAll('.tooltip');

    for (var i = 0; i < tooltips.length; i++) {
      tooltips[i].addEventListener('mouseover', function() {
        this.style.position = 'relative';
      });

      tooltips[i].addEventListener('mouseout', function() {
        this.style.position = '';
      });
    }
  </script>
</body>
</html>

In diesem Beispiel verwenden wir HTML. CSS und JavaScript werden verwendet, um die Funktion zu realisieren, Inhalte in einem kleinen Feld anzuzeigen, wenn die Maus bewegt wird. Bitte ändern und passen Sie sie bei Bedarf an Ihre spezifischen Bedürfnisse an.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Inhalt der kleinen Eingabeaufforderung, der angezeigt wird, wenn die Maus in Javascript bewegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html for 循环 事件 this position padding border 伪类 background
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wo Sie Javascript auf Ihrem Computer einstellen könnenNächster Artikel：Wo Sie Javascript auf Ihrem Computer einstellen können

In Verbindung stehende Artikel

Mehr sehen