Heim >Web-Frontend >js-Tutorial >Wie stelle ich den Cursorstil ohne href auf den Zeiger des Links ein?

Wie stelle ich den Cursorstil ohne href auf den Zeiger des Links ein?

王林nach vorne: 2023-08-24 12:13:02611Durchsuche

如何将光标样式设置为没有 href 的链接的指针？

Wir können das -Tag in HTML verwenden, um Links zu Webseiten hinzuzufügen. Der Standardcursorstil für das -Element ist Zeiger, aber das Entfernen des href-Attributs aus dem -Tag ändert den Cursorstil.

In diesem Tutorial lernen wir also, den Cursorstil als markierten Zeiger ohne href-Attribut beizubehalten.

Benutzer können dem Beispiel unten folgen, um den Standard-Cursorstil von Elementen

anzuzeigen

Beispiel

Im folgenden Beispiel verwenden wir das -Tag, um drei verschiedene Links zu erstellen.

In der Ausgabe können wir beobachten, dass, wenn wir mit der Maus über den ersten Link fahren, der Cursor zu einem Zeiger wird, weil er das href-Attribut für den zweiten Link enthält. Der Cursor wird auch zu einem Zeiger, weil er auch ein href-Attribut enthält ein leerer Zeichenfolgenwert und wenn wir mit der Maus über den dritten Link fahren, ändert sich der Cursorstil, da er das href-Attribut nicht enthält.

<html>
<body>
   <h2>Cursor pointer on the anchor texts</h2>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <br> <br>
   <a href = ""> Cursor pointer </a>
   <br> <br>
   <a> No cursor pointer </a>
</body>
</html>

Jetzt verstehen Benutzer, wie sich der Cursorstil ändert, wenn wir das href-Attribut aus dem -Tag entfernen.

Nachfolgend sehen wir uns ein Beispiel für das Setzen des Cursorzeigers für einen Link ohne href-Attribut an.

Grammatik

Benutzer können der folgenden Syntax folgen und CSS verwenden, um den Cursorzeiger auf einen Link ohne das href-Attribut zu setzen.

<style>
  .pointer {
     cursor: pointer;
   }
</style>

In der obigen Syntax ist „Zeiger“ die dem -Element zugewiesene Klasse, und wir ändern den Zeigerstil des Elements, das die Klasse „Zeiger“ enthält.

Beispiel

Im folgenden Beispiel erstellen wir zwei verschiedene Elemente und weisen beiden Elementen die Klasse „Zeiger“ zu. Im Abschnitt haben wir die Inline-Stile für die Seite hinzugefügt. Wir haben im

<html>
<head> 
   <style>
      .pointer {
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2>Using the CSS to set the cursor pointer on the anchor texts in the link without the href attribute </h2>
   <a class = "pointer"> cursor pointer </a>
   <br> <br>
   <a class = "pointer"> No href attribute </a>
</body>
</html>

Beispiel

Im folgenden Beispiel haben wir den Stil „cursor:pointer“ verwendet, um den Cursor eines -Elements ohne ein href-Attribut für einen Zeiger zu formatieren, wie in Beispiel 2 gezeigt, aber wir haben Inline-CSS auf das -Tag angewendet .

<html>
<body>
   <h3>Using the inline CSS to set cursor pointer on the anchor texts in the link without the href attribute. </h3>
   <a style = "cursor: pointer;"> cursor pointer </a>
</body>
</html>

Beispiel

Im folgenden Beispiel verwenden wir das Ereignisattribut „onmouseover“. Immer wenn sich der Mauszeiger über die -Markierung bewegt, ruft er die ihm zugewiesene Callback-Funktion auf. Anstatt eine Rückruffunktion zuzuweisen, weisen wir hier eine CSS-Zeile zu.

Wenn der Benutzer also mit der Maus über ein -Tag ohne href-Attribut fährt, wird der Cursorstil auf „Zeiger“ gesetzt.

<html>
<body>
   <h3>Using the onmouseover event and css to add cursor pointer on the anchor texts in the link without herf attribute </h3>
   <a onmouseover = "this.style.cursor='pointer'"> Link 1 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 2 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 3 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 4 </a> <br>
</body>
</html>

Beispiel

Im folgenden Beispiel haben wir das -Tag mit dem href-Attribut verwendet, aber wir haben eine leere Zeichenfolge als Wert des href-Attributs zugewiesen. Daher fungiert es automatisch als Null-Link und setzt den Cursorzeiger für das -Tag.

<html>
<body>
   <h3>Assigning the empty value to the href attribute to add cursor pointer </i> on the anchor texts</h3>
   <a href = ""> Link 1 </a> <br>
   <a href = ""> Link 2 </a> <br>
</body>
</html>

In diesem Tutorial haben wir gelernt, wie man den Cursor als Zeiger auf einen Link ohne das href-Attribut formatiert. Wir verwenden CSS, um den Cursorstil zu ändern. Darüber hinaus verwenden wir das Ereignisattribut onmouseover, um Mouseover-Ereignisse zu erkennen und den Cursorstil entsprechend zu ändern.

Das obige ist der detaillierte Inhalt vonWie stelle ich den Cursorstil ohne href auf den Zeiger des Links ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Wie füge ich den Summernote Editor mithilfe von Javascript zu einer Webseite hinzu?Nächster Artikel：Wie füge ich den Summernote Editor mithilfe von Javascript zu einer Webseite hinzu?

In Verbindung stehende Artikel

Mehr sehen