Cómo cambiar el cursor del mouse al pasar el cursor en WordPress

¿Sabía que hay más de 30 cursores diferentes que puede personalizar mediante la propiedad CSS del cursor ? Aquí está la lista completa y cómo aplicarla en su sitio web de WordPress.

Los tres cursores más comunes son
la flecha predeterminada
, el
puntero
y el cursor de texto. Simplemente coloque las palabras en negrita para obtener una vista previa en vivo. Consulte la hoja de trucos completa del cursor a continuación para obtener la lista completa.

👉 Post relacionado: Cómo reemplazar el cursor con una imagen personalizada en WordPress

Puede personalizar el cursor para mejorar la experiencia del usuario. Algunos complementos de formularios, por ejemplo, usan viejos botones grises de envío con el
cursor de flecha predeterminado
al pasar el cursor al pasar el cursor. ¿Por qué no diseñar el botón y cambiar a una
mano puntera
en su lugar? Y, por supuesto, podrías resaltar un elemento con una
cruz
o un
signo de interrogación
solo porque es divertido.

1. Cambiar el cursor de una clase CSS existente

En este ejemplo, voy a cambiar el cursor del mouse de la
flecha predeterminada
al
puntero de mano
más adecuado al pasar el cursor sobre un botón de envío de WPUF Post Form.

Antes

El cursor predeterminado en el formulario de publicación de WPUF

Después

Cambiar a un cursor de puntero de mano con CSS
  1. Ir a Apariencia » Personalizador desde tu panel de WordPress
  2. Expanda la pestaña CSS adicional
  3. Busca la clase a la que quieres orientar tus anuncios utilizando, por ejemplo, el Inspector de Chrome (mira el vídeo para ver un tutorial paso a paso)
  4. En este ejemplo, la clase button es .wpuf-submit-button , así que agregaré el fragmento de CSS a continuación para aplicar un puntero de mano al pasar el puntero:
    .wpuf-submit-button {
    cursor:pointer;
    }
  5. Guardar y previsualizar en frontend.

Solución de problemas: En algunos casos, es posible que deba agregar !important para anular el CSS existente. Solo use este martillo de trineo si el fragmento original no funciona. Ejemplo:

.wpuf-submit-button {
cursor:pointer !important;
}

 

2. Cambiar el cursor con CSS en línea

También puede cambiar el cursor agregando CSS en línea en su constructor de páginas, por ejemplo, Divi Builder, Gutenberg, Classic Editor o Elementor. Asegúrese de editar el código HTML mediante la ficha texto y no la ficha visual .

HTML con CSS en línea

Hover <a href="https://divimundo.com/" style="cursor:help;" >this link</a> to see a help cursor.
<ol>
    <li style="cursor:grab;">This list item will display a grab cursor</li>
    <li style="cursor:progress">This list item will display a progress spinner</li>
</ol>
<div style="cursor:move">This entire DIV will display a move cursor.</div>

 

Vista previa en vivo

Coloca el cursor sobre este vínculo para ver un cursor de ayuda.

  1. Este elemento de lista mostrará un cursor de agarre
  2. Este elemento de lista mostrará un control giratorio de progreso
Este DIV mostrará un cursor de movimiento.

Hoja de trucos del cursor CSS con vista previa en vivo

Desplace los cuadros a continuación para obtener una vista previa en vivo de los diferentes cursores. He resaltado el más común una vez.

cursor: alias

cursor: all-scroll

cursor: automático

cursor: celda

cursor: menú contextual

cursor: col-resize

cursor: copiar

cursor: punto de mira

cursor: predeterminado

cursor: e-resize

cursor: ew-resize

cursor: grab

cursor: agarrar;

cursor: Ayuda

cursor: mover

cursor: n-resize

cursor: ne-resize

cursor: nesw-resize

cursor: ns-resize

cursor: nw-resize

cursor: nwse-resize

cursor: no-drop

cursor: ninguno

cursor: no permitido

cursor: puntero

cursor: progreso

cursor: row-resize

cursor: s-resize

cursor: se-resize

cursor: sw-resize

cursor: texto

cursor: esperar

cursor: zoom

cursor: zoom-out

¡Eso es todo por hoy!

Espero que hayas disfrutado de este post. Suscríbete a DiviMundo en YouTube y únete a nuestro grupo de Facebook para obtener contenido más nítido sobre WordPress y diseño web.

👉 Post relacionado: Cómo reemplazar el cursor con una imagen personalizada en WordPress

👉 Curso gratuito: Crear un sitio web desde cero con Divi

-->[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter="on" custom_padding_last_edited="on|phone" admin_label="Row - CONTENT" module_class="dvcs_card_featured" _builder_version="4.16" _module_preset="default" background_color="#521d91" use_background_color_gradient="on" background_color_gradient_type="circular" background_color_gradient_direction_radial="top left" background_color_gradient_stops="#4a42ec 0%|#521d91 100%" background_color_gradient_start="#4a42ec" background_color_gradient_end="#521d91" width="90%" max_width="1120px" module_alignment="center" custom_margin="|||||false" custom_margin_tablet="|||||false" custom_margin_phone="|||||false" custom_margin_last_edited="on|desktop" custom_padding="50px|32px|50px|32px|true|true" custom_padding_tablet="" custom_padding_phone="|22px||22px||true" link_option_url="https://diviguiden.se/divi" link_option_url_new_window="on" border_radii="on|8px|8px|8px|8px" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="|||on|||||" text_text_color="#96cbd6" text_font_size="12px" text_orientation="center" background_layout="dark" text_font_size_phone="12px" global_colors_info="{}"]

Enlace de afiliados

[/et_pb_text][et_pb_text admin_label="Text - MAIN" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" header_font="||||||||" header_2_font="|700|||||||" header_2_text_align="center" header_2_text_color="#ffffff" header_2_font_size="37px" max_width="85%" max_width_tablet="95%" max_width_phone="100%" max_width_last_edited="on|phone" custom_margin="-22px||6px|||" custom_margin_tablet="32px||10px" custom_margin_phone="0px||15px|" custom_margin_last_edited="on|desktop" custom_padding="|10px|12px|10px||true" custom_padding_tablet="|32px||32px||true" custom_padding_phone="|0px||0px" custom_padding_last_edited="on|tablet" header_2_font_size_tablet="31px" header_2_font_size_phone="19px" header_2_font_size_last_edited="on|desktop" header_2_line_height_tablet="" header_2_line_height_phone="1.4em" header_2_line_height_last_edited="on|desktop" global_colors_info="{}"]

806 875 clientes ya han desatado el verdadero potencial de WordPress. Descarga Divi y comienza a crear sitios web hermosos hoy.

[/et_pb_text][et_pb_button button_url="https://divimundo.com/divi/" url_new_window="on" button_text="EXPLORA DIVI AHORA" button_alignment="center" admin_label="Button - SIGN UP TODAY" _builder_version="4.18.0" _module_preset="default" button_text_color="#333333" button_bg_color="#F7F8FA" transform_translate_linked__hover="off" custom_margin="0px||0px|" custom_margin_tablet="0px||0px|" custom_margin_phone="0px||0px" custom_margin_last_edited="on|desktop" custom_padding="14px|32px|14px|32px|true|true" custom_css_main_element="font-weight:bold !important;" box_shadow_style="preset3" box_shadow_color="rgba(0,0,0,0)" box_shadow_horizontal_last_edited="off|desktop" global_colors_info="{}" transform_styles__hover_enabled="on" transform_scale__hover_enabled="on" transform_translate__hover_enabled="on" transform_rotate__hover_enabled="on" transform_skew__hover_enabled="on" transform_origin__hover_enabled="on" transform_translate__hover="0px|-1px" box_shadow_color__hover_enabled="on" box_shadow_horizontal__hover_enabled="on" box_shadow_color__hover="rgba(255,74,158,0.2)" box_shadow_horizontal__hover="0px" button_bg_color__hover_enabled="on|hover" button_bg_color__hover="#FFFFFF" button_bg_enable_color__hover="on"][/et_pb_button][et_pb_text admin_label="Text - SECONDARY" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" text_text_color="rgba(255,255,255,0.75)" text_font_size="18px" header_font="||||||||" text_orientation="center" max_width="850px" custom_margin="40px||32px||false" custom_margin_tablet="32px||32px||true" custom_margin_phone="15px||0px||false" custom_margin_last_edited="on|desktop" text_font_size_tablet="17px" text_text_align="center" global_colors_info="{}"]

Pruebe hoy y obtenga su dinero de vuelta dentro de 30 días si usted no está contento. 100% libre de riesgos.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.17.4" _module_preset="default" background_color="#FFFFFF" custom_margin="||||false|false" global_colors_info="{}"][et_pb_row _builder_version="4.17.4" _module_preset="default" background_color="RGBA(255,255,255,0)" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" header_2_font_size="32px" header_2_font_size_tablet="28px" header_2_font_size_phone="23px" global_colors_info="{}"]

Artículos Relacionados

[/et_pb_text][et_pb_blog posts_number="3" _builder_version="4.18.0" _module_preset="d557fc3a-2152-401e-a7c8-c8666bb17e64" read_more_font="|700||on|||||" read_more_letter_spacing="0.5px" read_more_line_height="3em" global_colors_info="{}" custom_css_title_last_edited="on|phone" custom_css_title_phone="margin-bottom:5px"][/et_pb_blog][et_pb_button button_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjI5MDY2In19@" button_text="Más artículos" button_alignment="center" _builder_version="4.18.0" _dynamic_attributes="button_url" _module_preset="default" button_font="|700|||||||" custom_margin="||60px|||" global_colors_info="{}"][/et_pb_button][et_pb_divider color="#d6d6d6" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][/et_pb_divider][et_pb_comments _builder_version="4.18.0" _module_preset="default" header_level="h6" header_text_color="#7d75d9" custom_button="on" button_font="|700|||||||" button_use_icon="off" hover_enabled="0" custom_css_reply_button="color:#fff !important;" custom_css_message_field="border-radius:10px;" global_colors_info="{}" custom_css_reply_button__hover_enabled="on|hover" custom_css_reply_button__hover="color:#fff !important;" button_text_color="#FFFFFF" sticky_enabled="0"][/et_pb_comments][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Section - CTA BACKGROUND OVERLAY" module_class="dvcs-highlighted-overlay" _builder_version="4.16" _module_preset="default" background_color="rgba(78,47,188,0.8)" locked="off" global_colors_info="{}"][/et_pb_section]

Descargo de afiliados

Todo el contenido de DiviMundo es financiado por ustedes, nuestros queridos lectores. Algunos de los enlaces son enlaces de afiliados. Esto significa que si hace clic en el enlace y compra algo, recibiré una comisión de afiliado. Pero nunca te costará más. ¡Gracias por su apoyo!

Victor Duse, fundador de DiviMundo