Wie kann man den Mauszeiger mit CSS ändern

Fast alle Webseiten ändern den Cursor für eine bessere Benutzerführung oder einfach nur zum Spaß. Das Anpassen von Mauszeigern ist eine einfache Möglichkeit, Ihrer Website bei Bedarf eine zusätzliche Anziehungskraft zu geben.

Verwenden Sie die CSS-Eigenschaft, um das Aussehen des Cursors festzulegen. Diese Eigenschaft wird verwendet, um den Cursortyp des Elements zu ändern. Das kann für die Webseiten nützlich sein, auf denen verschiedene Funktionen durchgeführt werden sollen, anstatt nur zu klicken.

Dieser Artikel kann Ihnen helfen, die Möglichkeiten, die ein Cursor in CSS zur Verbesserung der Benutzererfahrung bieten kann, zu steuern.

Wir werden die folgenden Möglichkeiten zur Verwaltung der Cursorbenutzbarkeit betrachten:

Wie man den Cursor zu einer Hand verwandelt, wenn der Benutzer die Maus über ein Listenelement bewegt

Wenn Sie mit der Maus über ein Listenelement führen und den Mauszeiger in einen Handzeiger verwandeln möchten, können Sie class für Ihr Listenelement festlegen (<li>) und den Stil nur für dieses festlegen. Aber wenn Sie einen Handzeiger für alle Listenelemente einstellen möchten, setzen Sie einfach den Stil für das Element <<li>>.

Ihr Code wird so aussehen, wenn Sie einen Fingerzeiger einstellen:

li {
cursor: pointer;
}

Lassen Sie uns ein Beispiel betrachten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titele des Dokuments</title>
    <style>
      li{
      margin-bottom:15px;
      }
      li.pointer {
      cursor: pointer;
      }
      li:hover {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h4>Bewegen Sie den Mauszeiger über die Listenelemente, um zu sehen, wie sich der Standardcursor in einen Zeiger verwandelt:</h4>
    <ul>
      <li>Listenelement 1 mit dem Standard-Cursor.</li>
      <li class="pointer">Listenelement 2 mit dem Mauszeiger.</li>
      <li>Ein weiteres Listenelement mit dem Standard-Mauszeiger.</li>
    </ul>
  </body>
</html>

Hier ist ein weiteres Beispiel, das den Mauszeiger abwechselnd ändert. In diesem Beispiel verwendet man nth-child(odd) als cursor: progress und nth-child(even) als cursor: pointer, um separate Cursortypen auf verschiedenen Listenelementen zu haben.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      li:nth-child(odd) { 
      background: #1c87c9; 
      cursor: progress; 
      width: 50%; 
      padding: 5px; 
      } 
      li:nth-child(even) { 
      background: #ccc; 
      cursor: pointer; 
      width: 50%; 
      padding: 5px; 
      } 
    </style>
  </head>
  <body>
    <p>Bewegen Sie die Maus über die Listenelemente, um zu sehen, wie sich der Cursor ändert:</p>
    <ul>
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
      <li>Listenelement 4</li>
      <li>Listenelement 5</li>
      <li>Listenelement 6</li>
      <li>Listenelement 7</li>
    </ul>
  </body>
</html>

Es ist bekannt, dass der Standard-Cursor für einen Hyperlink auf den Cursortyp "pointer" gesetzt wird. Wenn Sie es ändern möchten, müssen Sie den Cursortyp für das Element <a> mit dem CSS-Selektor :hover angeben.

Um "pointer" zu "default" zu ändern, müssen Sie dieses Stück des Codes verwenden:

a:hover {
cursor: default;
}

Lassen Sie ein passendes Beispiel für diese Methode betrachten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .link:hover {
      cursor: default;
      }
    </style>
  </head>
  <body>
    <h4>Bewegen Sie den Mauszeiger über den Hyperlink, um zu sehen, wie sich "pointer" zu "default" ändert:</h4>
    <p><a href="https://de.w3docs.com">W3docs</a> Link mit dem Typ "pointer".</p>
    <p><a class="link" href="https://de.w3docs.com">W3docs</a> Link mit dem geänderten Cursortyp  "default".</p>
  </body>
</html>

Da die Links voreingestellt die Eigenschaften color: blue und text-decoration: underline haben, empfehlen wir Ihnen, die Linkfarbe zu ändern und weiter mit Hyperlinks zu gehen.

Für mehr Information über die Links lesen Sie den Artikel "Wie kann man die Linkfarbe mit CSS ändern".

Wie man einen benutzerdefinierten Cursor-Bildeffekt für ein Element verwenden kann

Lassen Sie uns mehr Spaß mit Cursor haben! Es ist möglich, ein eigenes Bild als Cursor auf der Webseite einzufügen.

Stellen Sie die Cursor-Eigenschaft auf ein Bild, das diesem Stück des Codes folgt, ein:

.mycursor {
cursor: url("myimage.png"), pointer;	
}
Vergessen Sie nicht, den Cursortyp so einzustellen, dass er angezeigt wird, wenn der Browser das angegebene Bild nicht verwenden kann, da Ihr Code sonst nicht funktionieren wird.

Dies ist ein lustiger Trick, den Sie Ihrer Website hinzufügen können, wenn Benutzer nicht erwarten, solche Dinge zu sehen. Stellen Sie sich vor, Sie haben eine Form, in der die Antwort einem bestimmten Gefühl entspricht, hier ist der ideale Ort, um Emoji-Bilder zu verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #eee;
      text-align: center;
      }
      button {
      display: inline-block;
      background-color: #1c87c9;
      color: #eee;
      margin: 25px;
      position: relative;
      width: 140px;
      height: 45px;
      border-radius: 3px;
      border: none;
      font-size: 1.5em;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 2px 8px 0 #999;
      }
      button:hover {
      background-color: #999;
      color: #ffcc00;
      }
      #happy {
      cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;
      }
      #sad {
      cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #love {
      cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Was ist Ihr Eindruck von unserer Website?</h2>
    <button id="happy">Glücklich/button>
    <button id="sad">Traurig</button>
    <button id="love">Liebe</button>
  </body>
</html>

Lassen Sie uns ein anderes lustiges Beispiel sehen, wo Icons verwendet werden. Sie können Symbole von Webseiten, auf denen der Base64-Code bereitgestellt wird, verwenden, indem Sie den Base64-Code einfach in den URL-Wert des Cursors einfügen. Oder laden Sie das Symbol einfach auf Ihre Webseite herunter und verwenden Sie die URL zum Einstellen des Cursors.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      width: 600px;
      margin: 0.5em auto;
      }
      img {
      width: 280px;
      height: 186px;
      margin: 5px;
      display: inline-block;
      background-position: 50% 50%;
      }
      .dog {	
      cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {	
      cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto;
      }
      .nature {	
      cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto;	
      }
      .house {
      cursor:
      url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    </style>
  </head>
  <body>
    <img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus">
    <img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature">
    <img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog">
    <img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house">
  </body>
</html>

Beispiele für alle Cursortypen

Hier sehen Sie ein Beispiel, das alle möglichen Cursorypen enthält.

Für die Werte "zoom-in", "zoom-out", "grab" und "grabbing" wird die Erweiterung -webkit- hinzugefügt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 1px solid #666;
      border-radius: 5px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #1c87c9;
      }
      .auto { cursor: auto; }
      .default { cursor: default; }
      .none { cursor: none; }
      .context-menu { cursor: context-menu; }
      .help { cursor: help; }
      .pointer { cursor: pointer; }
      .progress { cursor: progress; }
      .wait { cursor: wait; }
      .cell { cursor: cell; }
      .crosshair { cursor: crosshair; }
      .text { cursor: text; }
      .vertical-text { cursor: vertical-text; }
      .alias { cursor: alias; }
      .copy { cursor: copy; }
      .move { cursor: move; }
      .no-drop { cursor: no-drop; }
      .not-allowed { cursor: not-allowed; }
      .all-scroll { cursor: all-scroll; }
      .col-resize { cursor: col-resize; }
      .row-resize { cursor: row-resize; }
      .n-resize { cursor: n-resize; }
      .e-resize { cursor: e-resize; }
      .s-resize { cursor: s-resize; }
      .w-resize { cursor: w-resize; }
      .ns-resize { cursor: ns-resize; }
      .ew-resize { cursor: ew-resize; }
      .ne-resize { cursor: ne-resize; }
      .nw-resize { cursor: nw-resize; }
      .se-resize { cursor: se-resize; }
      .sw-resize { cursor: sw-resize; }
      .nesw-resize { cursor: nesw-resize; }
      .nwse-resize { cursor: nwse-resize; }
      .grab { cursor: -webkit-grab; cursor: grab; }
      .grabbing { cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out { cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h2>Beispiel für eine Cursor-Eigenschaft</h2>
    <p>Bewegen Sie den Mauszeiger über das Element, um die Änderungen zu sehen:</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>