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.
- Ir a Apariencia » Personalizador desde tu panel de WordPress
- Expanda la pestaña CSS adicional
- 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)
- 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;
} - 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.
- Este elemento de lista mostrará un cursor de agarre
- 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.
-->[/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]
