Utilidades de Spectre Cursor

Las utilidades Spectre Cursor son clases de espectro que especifican el cursor del mouse que se muestra cuando el usuario realiza el movimiento del mouse o mientras apunta a un elemento. En CSS, consulte la propiedad del cursor CSS para una mejor comprensión

Clase de utilidad Spectre Cursor:

  • c-hand: esta clase se utiliza para convertir el cursor en un signo de mano.
  • c-move: esta clase se utiliza para convertir el cursor en un signo en movimiento.
  • c-zoom-in: esta clase se utiliza para convertir el cursor en un signo de zoom-in (más en lupa).
  • c-zoom-out: esta clase se utiliza para convertir el cursor en un signo de alejamiento (menos en la lupa).
  • c-not-allowed: esta clase se utiliza para convertir el cursor en el signo de no permitido.
  • c-auto: esta clase se utiliza para convertir el cursor en el signo automático.

Sintaxis:

<div class="c-hand">
   ....
</div>

Ejemplo: El siguiente ejemplo ilustra las utilidades de Spectre Cursor .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE Cursor Class</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Cursor Class</strong>
        <br><br>
    </center>
    <div class="container">
        <div class="bg-success c-hand">
            The cursor is hand
        </div>
        <br>
        <div class="bg-success c-move">
             The cursor is move
        </div>
        <br>
        <div class="bg-success c-zoom-in">
            The cursor is zoom-in
        </div>
        <br>
        <div class="bg-success c-zoom-out">
            The cursor is zoom-out
        </div>
        <br>
        <div class="bg-success c-not-allowed">
           The cursor is not-allowed
        </div>
        <br>
        <div class="bg-success c-auto">
            The cursor is auto
        </div>
    </div>
</body>
</html>

Producción:

Spectre Cursor utilities

Utilidades de Spectre Cursor

Referencia: https://picturepan2.github.io/spectre/utilities/cursors.html

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *