{"id":12956,"date":"2023-01-27T13:00:00","date_gmt":"2023-01-27T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=12956"},"modified":"2024-04-26T14:36:53","modified_gmt":"2024-04-26T12:36:53","slug":"aprende-a-cambiar-el-cursor-en-css","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/","title":{"rendered":"Aprende a cambiar el cursor en CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u00bfAlguna vez has entrado en un sitio web y has visto que el cursor cambiaba o no era el habitual? Si te preguntas c\u00f3mo conseguir que el cursor cambie en tu sitio web, este es el art\u00edculo que est\u00e1s buscando. Qu\u00e9date y <strong>aprende a cambiar y personalizar tu propio cursor en CSS<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"960\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/opciones-de-cursor-por-defecto-css.jpg\" alt=\"Opciones de cursor por defecto CSS\" class=\"wp-image-13044\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/opciones-de-cursor-por-defecto-css.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/opciones-de-cursor-por-defecto-css-200x300.jpg 200w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Cambiar el icono del rat\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo del <a href=\"https:\/\/carontestudio.com\/blog\/que-es-diseno-ux\/\">dise\u00f1o UI\/UX<\/a> es conseguir que los usuarios naveguen por nuestra web de la manera m\u00e1s c\u00f3moda posible. <strong>Conseguir que nuestras webs sean intuitivas y accesibles tiene que ser la premisa de todo dise\u00f1o web<\/strong>. Una de las herramientas que tenemos para orientar a nuestros usuarios en el entorno web es el cursor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoy en d\u00eda, todo el mundo que utilice un ordenador sabe que cuando el cursor cambia, indica que puede realizarse una acci\u00f3n. Por ejemplo, que el cursor cambie de la flecha normal a una mano indicando con el dedo \u00edndice, significa que el elemento sobre el que est\u00e1 el cursor es clicable. Es decir, que posiblemente ese elemento sea un bot\u00f3n o un enlace que nos lleve a otro lugar. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Otro ejemplo podr\u00eda ser, al mover nuestro cursor por encima de una imagen, cuando el cursor se transforma en una lupa con un s\u00edmbolo de sumar, indicar\u00e1 al usuario que al hacer clic, podr\u00e1 aumentar el tama\u00f1o de la imagen.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Es muy necesario establecer los cursores que se mostrar\u00e1n en determinadas situaciones para que nuestros usuarios entiendan que pueden hacer clic, aumentar o mover alg\u00fan elemento en pantalla. <strong>Para facilitar el uso correcto de los diferentes tipos de cursores, existe una propiedad en CSS llamada \u00abcursor\u00bb.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Opciones de icono de cursor por defecto CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A trav\u00e9s de la propiedad \u00abcursor\u00bb en CSS podemos cambiar directamente en la hoja de estilos de nuestra web el tipo de cursor que aparecer\u00e1 en nuestra web o cu\u00e1ndo aparecer\u00e1 cada cursor. Existen diferentes tipos de cursores que tienen por defecto la mayor\u00eda de los navegadores actuales. Podemos hacer uso de estos tan sencillamente como eligiendo la opci\u00f3n que queramos en la<strong> propiedad \u00abcursor\u00bb<\/strong>. Estas son las diferentes opciones existentes:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>cursor: default<\/li>\n\n\n\n<li>cursor: crosshair<\/li>\n\n\n\n<li>cursor: hand <\/li>\n\n\n\n<li>cursor: pointer <\/li>\n\n\n\n<li>cursor: move<\/li>\n\n\n\n<li>cursor: text<\/li>\n\n\n\n<li>cursor: wait<\/li>\n\n\n\n<li>cursor: help<\/li>\n\n\n\n<li>cursor: n-resize<\/li>\n\n\n\n<li>cursor: ne-resize<\/li>\n\n\n\n<li>cursor: e-resize<\/li>\n\n\n\n<li>cursor: se-resize<\/li>\n\n\n\n<li>cursor: s-resize<\/li>\n\n\n\n<li>cursor: sw-resize<\/li>\n\n\n\n<li>cursor: w-resize<\/li>\n\n\n\n<li>cursor: nw-resize<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"640\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-icono-css.jpg\" alt=\"Cambiar icono cursos css\" class=\"wp-image-13042\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-icono-css.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-icono-css-300x300.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-icono-css-150x150.jpg 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">En el siguiente ejemplo podemos ver todas las opciones de cursor que nos ofrece por defecto la propiedad de cursor en CSS. Pasa por encima de los botones azules y desc\u00fabrelas:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"600\" data-default-tab=\"html,result\" data-slug-hash=\"zxOvLd\" data-user=\"carontestudio\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/falconmasters\/pen\/zxOvLd\">\n  Untitled<\/a> (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Cambiar el cursor cuando est\u00e9 encima en CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esta opci\u00f3n de editar el tipo de cursor, puede aplicarse en funci\u00f3n a la posici\u00f3n del cursor en la pantalla, es decir, podemos elegir el tipo de cursor que aparecer\u00e1 en pantalla seg\u00fan por donde pase el usuario el rat\u00f3n. Podemos hacer que al pasar por encima de una imagen el cursor se vea de determinada manera, o que al pasar por encima de un bot\u00f3n se visualice otro tipo de cursor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estas modificaciones las realizaremos a partir de la<strong> pseudo-clase \u00ab:hover\u00bb<\/strong> de CSS, como en el siguiente ejemplo:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"RwBjWPL\" data-user=\"carontestudio\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/RwBjWPL\">\n  Untitled<\/a> (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Personaliza el cursor en tu web<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s de las opciones que nos ofrece por defecto el sistema, <strong>podemos subir nuestras propias im\u00e1genes y elegir c\u00f3mo queremos que se vea el cursor en toda nuestra web<\/strong>, consiguiendo un nivel de personalizaci\u00f3n mucho mayor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La tendencia en dise\u00f1o web de cambiar el cursor o personalizarlo no es nada nuevo, en nuestro art\u00edculo de <a href=\"https:\/\/carontestudio.com\/blog\/tendencias-en-diseno-web-2021-2022\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tendencias en Dise\u00f1o web 2021-2022<\/a> preve\u00edamos que los cursores personalizados hab\u00edan llegado para quedarse, y as\u00ed ha sido. Sin embargo, es una opci\u00f3n que en muchos dise\u00f1os se pasa por alto, y es una oportunidad a la que se le puede sacar partido y explotar al m\u00e1ximo, consiguiendo webs mucho m\u00e1s orientadas al usuario, que <strong>generen una interacci\u00f3n diferente y que conecten con la identidad de marca.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para ello, tendremos que crear y exportar nuestra imagen en formato <a href=\"https:\/\/carontestudio.com\/blog\/que-es-el-formato-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">SVG<\/a> y aplicarla en CSS de la siguiente manera:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"OJwOygo\" data-user=\"carontestudio\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/OJwOygo\">\n  Untitled<\/a> (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Ejemplos de dise\u00f1o web con cursores personalizados<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez visto c\u00f3mo podemos hacer que el cursor de nuestro sitio web cambie, te ofrecemos ejemplos de webs que utilizan diferentes tipos de cursores personalizados. En ellas podemos ver c\u00f3mo <strong>aprovechan este recurso unific\u00e1ndolo al resto del universo visual de la web<\/strong>, consiguiendo una experiencia de usuario mucho m\u00e1s intuitiva, inmersiva y \u00fanica.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"417\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-1.jpg\" alt=\"Aprende a cambiar el cursor en css\" class=\"wp-image-13000\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-1.jpg 1000w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-1-300x125.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-1-768x320.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/empiempi.me\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"481\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-3.jpg\" alt=\"C\u00f3mo cambiar el cursor en css\" class=\"wp-image-13001\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-3.jpg 1000w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-3-300x144.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-3-768x369.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ovloopbrand.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"463\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-4.jpg\" alt=\"Cambiar el cursor en css ejemplo\" class=\"wp-image-12998\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-4.jpg 1000w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-4-300x139.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-4-768x356.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/garoaskincare.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"463\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-2.jpg\" alt=\"Cursor dise\u00f1o web\" class=\"wp-image-12999\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-2.jpg 1000w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-2-300x139.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cursor-web-example-2-768x356.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n: Cambiar el cursor en CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Como hemos visto en el art\u00edculo de hoy, modificar el aspecto del cursor en CSS puede ser un recurso muy \u00fatil de cara a experiencia de usuario y a mejorar la est\u00e9tica de nuestra web. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nosotros tambi\u00e9n, como <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\/\">agencia de Dise\u00f1o web<\/a>, estamos implementando el uso de diferentes cursores personalizados en nuestros <strong>desarrollos web a medida<\/strong>. Por ejemplo, uno de nuestros \u00faltimos proyectos es el redise\u00f1o de la web de Bodegas Casa Primicia. Para contar la historia de estas bodegas, hemos optado por hacer uso de un carrusel, y un cursor personalizado que guie al usuario a trav\u00e9s de la historia de Casa Primicia. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"461\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/bodegas-casa-primicia-cursor.jpg\" alt=\"Bodegas Casa Primicia Cursor CSS\" class=\"wp-image-13028\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/bodegas-casa-primicia-cursor.jpg 1000w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/bodegas-casa-primicia-cursor-300x138.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/bodegas-casa-primicia-cursor-768x354.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Espero que el art\u00edculo de hoy haya sido de tu inter\u00e9s, no dudes en dejar tus impresiones en los comentarios, \u00a1Estaremos encantados de leerte!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns sabermas is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/listado-de-propiedades-css\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-1024x604.jpg\" alt=\"Listado completo de propiedades CSS.\" class=\"wp-image-8918\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css-1024x604.jpg\" alt=\"Tipos de selectores CSS\" class=\"wp-image-5593\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.<\/p>\n","protected":false},"author":21,"featured_media":13003,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93],"class_list":["post-12956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Aprende a cambiar el cursor en CSS - Caronte Web Studio<\/title>\n<meta name=\"description\" content=\"En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprende a cambiar el cursor en CSS - Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de marketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-27T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-26T12:36:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-cursor-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Caronte Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caronte Studio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/\"},\"author\":{\"name\":\"Caronte Studio\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\"},\"headline\":\"Aprende a cambiar el cursor en CSS\",\"datePublished\":\"2023-01-27T12:00:00+00:00\",\"dateModified\":\"2024-04-26T12:36:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/\"},\"wordCount\":939,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/cambiar-cursor-css.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/\",\"name\":\"Aprende a cambiar el cursor en CSS - Caronte Web Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/cambiar-cursor-css.jpg\",\"datePublished\":\"2023-01-27T12:00:00+00:00\",\"dateModified\":\"2024-04-26T12:36:53+00:00\",\"description\":\"En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/cambiar-cursor-css.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/cambiar-cursor-css.jpg\",\"width\":1250,\"height\":737,\"caption\":\"C\u00f3mo personalizar el cursor en CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/aprende-a-cambiar-el-cursor-en-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aprende a cambiar el cursor en CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\",\"name\":\"Caronte Studio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"caption\":\"Caronte Studio\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/caronte-studio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aprende a cambiar el cursor en CSS - Caronte Web Studio","description":"En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/","og_locale":"es_ES","og_type":"article","og_title":"Aprende a cambiar el cursor en CSS - Caronte Web Studio","og_description":"En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.","og_url":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/","og_site_name":"Blog de marketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2023-01-27T12:00:00+00:00","article_modified_time":"2024-04-26T12:36:53+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-cursor-css.jpg","type":"image\/jpeg"}],"author":"Caronte Studio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Caronte Studio","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/"},"author":{"name":"Caronte Studio","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979"},"headline":"Aprende a cambiar el cursor en CSS","datePublished":"2023-01-27T12:00:00+00:00","dateModified":"2024-04-26T12:36:53+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/"},"wordCount":939,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-cursor-css.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/","url":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/","name":"Aprende a cambiar el cursor en CSS - Caronte Web Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-cursor-css.jpg","datePublished":"2023-01-27T12:00:00+00:00","dateModified":"2024-04-26T12:36:53+00:00","description":"En el art\u00edculo de hoy te ense\u00f1amos a cambiar y personalizar el cursor en CSS para que tus webs ofrezcan la mejor experiencia de usuario.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-cursor-css.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/01\/cambiar-cursor-css.jpg","width":1250,"height":737,"caption":"C\u00f3mo personalizar el cursor en CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/aprende-a-cambiar-el-cursor-en-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Aprende a cambiar el cursor en CSS"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979","name":"Caronte Studio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","caption":"Caronte Studio"},"url":"https:\/\/carontestudio.com\/blog\/author\/caronte-studio\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/12956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=12956"}],"version-history":[{"count":38,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/12956\/revisions"}],"predecessor-version":[{"id":19790,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/12956\/revisions\/19790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/13003"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=12956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=12956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=12956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}