{"id":5890,"date":"2015-07-23T12:15:29","date_gmt":"2015-07-23T09:15:29","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5890"},"modified":"2018-01-08T14:16:14","modified_gmt":"2018-01-08T12:16:14","slug":"css-cursor-pointer-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/","title":{"rendered":"CSS Cursor Pointer Example"},"content":{"rendered":"<p>In this example, we&#8217;ll go through the <code>cursor<\/code> property of CSS. More specifically, we&#8217;re going to exaplain the <code>pointer<\/code> property value. The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element. In the case of the <code>pointer<\/code> value, the cursor is a pointer and indicates a link.<\/p>\n<p>The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX &#8211; as they convey the idea of certain functionality.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>1. Basic Document Setup<\/h2>\n<p>Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n<pre class=\"brush:xml\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;CSS Cursor Pointer Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- STYLE SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML SECTION --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>In the HTML section, we&#8217;ll add several lines of div&#8217;s, each of which will contain a specific cursor property value inline. All of the elements will have tha same <code>box<\/code> class, which will give the elements a basic styling. Because the cursor property is the only to change accross elements, we don&#8217;t need to define that in a Style Section, instead we can do that inline.<\/p>\n<h2>2. Cursor Property Values<\/h2>\n<p>To begin, do notice the general application structure: <code>element\/class { cursor: value }<\/code>. The possible values of it are:<\/p>\n<p>&#8211; alias &#8211; the cursor indicates an alias of something is to be created.<br \/>\n&#8211; all-scroll &#8211; the cursor indicates that something can be scrolled in any direction.<br \/>\n&#8211; auto &#8211; default. The browser sets a cursor<br \/>\n&#8211; cell &#8211; the cursor indicates that a cell (or set of cells) may be selected.<br \/>\n&#8211; context-menu &#8211; the cursor indicates that a context-menu is available.<br \/>\n&#8211; col-resize &#8211; the cursor indicates that the column can be resized horizontally.<br \/>\n&#8211; copy &#8211; the cursor indicates something is to be copied.<br \/>\n&#8211; crosshair &#8211; the cursor render as a crosshair.<br \/>\n&#8211; default &#8211; the default cursor.<br \/>\n&#8211; e-resize &#8211; the cursor indicates that an edge of a box is to be moved right (east).<br \/>\n&#8211; ew-resize &#8211; indicates a bidirectional resize cursor.<br \/>\n&#8211; grab &#8211; the cursor indicates that something can be grabbed.<br \/>\n&#8211; grabbing &#8211; the cursor indicates that something can be grabbed.<br \/>\n&#8211; help &#8211; the cursor indicates that help is available.<br \/>\n&#8211; move &#8211; the cursor indicates something is to be moved.<br \/>\n&#8211; n-resize &#8211; the cursor indicates that an edge of a box is to be moved up (north).<br \/>\n&#8211; ne-resize &#8211; the cursor indicates that an edge of a box is to be moved up and right (north\/east).<br \/>\n&#8211; nesw-resize &#8211; indicates a bidirectional resize cursor.<br \/>\n&#8211; ns-resize &#8211; indicates a bidirectional resize cursor.<br \/>\n&#8211; nw-resize &#8211; indicates that an edge of a box is to be moved up and left (north\/west).<br \/>\n&#8211; nwse-resize &#8211; indicates a bidirectional resize cursor.<br \/>\n&#8211; no-drop &#8211;  indicates that the dragged item cannot be dropped here.<br \/>\n&#8211; none &#8211; no cursor is rendered for the element.<br \/>\n&#8211; not-allowed &#8211;  indicates that the requested action will not be executed.<br \/>\n&#8211; pointer &#8211; the cursor is a pointer and indicates a link.<br \/>\n&#8211; progress &#8211; the cursor indicates that the program is busy (in progress).<br \/>\n&#8211; row-resize &#8211; the cursor indicates that the row can be resized vertically.<br \/>\n&#8211; s-resize &#8211; the cursor indicates that an edge of a box is to be moved down (south).<br \/>\n&#8211; se-resize &#8211; the cursor indicates that an edge of a box is to be moved down and right (south\/east).<br \/>\n&#8211; sw-resize &#8211; the cursor indicates that an edge of a box is to be moved down and left (south\/west).<br \/>\n&#8211; text &#8211; the cursor indicates text that may be selected.<br \/>\n&#8211; vertical-text &#8211; The cursor indicates vertical-text that may be selected.<br \/>\n&#8211; w-resize &#8211; The cursor indicates that an edge of a box is to be moved left (west).<br \/>\n&#8211; wait &#8211; The cursor indicates that the program is busy.<br \/>\n&#8211; zoom-in &#8211; The cursor indicates that something can be zoomed in.<br \/>\n&#8211; zoom-out &#8211; The cursor indicates that something can be zoomed out.<\/p>\n<p>Now in a single code snippet, let&#8217;s see most of them in action:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;div class=\"box\" style=\"cursor:auto\"&gt;auto&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:crosshair\"&gt;crosshair&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:default\"&gt;default&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:e-resize\"&gt;e-resize&lt;\/div&gt;&lt;br&gt;\r\n&lt;div class=\"box\" style=\"cursor:grab\"&gt;grab&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:help\"&gt;help&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:move\"&gt;move&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:n-resize\"&gt;n-resize&lt;\/div&gt;&lt;br&gt;\r\n&lt;div class=\"box\" style=\"cursor:ne-resize\"&gt;ne-resize&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:nw-resize\"&gt;nw-resize&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:pointer\"&gt;pointer&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:progress\"&gt;progress&lt;\/div&gt;&lt;br&gt;\r\n&lt;div class=\"box\" style=\"cursor:s-resize\"&gt;s-resize&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:se-resize\"&gt;se-resize&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:sw-resize\"&gt;sw-resize&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:text\"&gt;text&lt;\/div&gt;&lt;br&gt;\r\n&lt;div class=\"box\" style=\"cursor:w-resize\"&gt;w-resize&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:wait\"&gt;wait&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:not-allowed\"&gt;not-allowed&lt;\/div&gt;\r\n&lt;div class=\"box\" style=\"cursor:no-drop\"&gt;no-drop&lt;\/div&gt;&lt;br&gt;\r\n<\/pre>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE  SECTION --&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\n.box {\r\n    width: 10em;\r\n    height: 8em;\r\n    border: 0.1em solid black;\r\n    background-color: ghostwhite;\r\n    display: inline-block;\r\n    text-align: center;\r\n    line-height: 8em;\r\n    margin: 0.5em;\r\n    font-family: \"Aller\";\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>The following image shows how every cursor value renders like:<br \/>\n<figure id=\"attachment_5899\" aria-describedby=\"caption-attachment-5899\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/CSS-Custom-Cursors1.png\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/CSS-Custom-Cursors1.png\" alt=\"CSS Cursors\" width=\"600\" height=\"250\" class=\"size-full wp-image-5899\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/CSS-Custom-Cursors1.png 600w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/CSS-Custom-Cursors1-300x125.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-5899\" class=\"wp-caption-text\">CSS Cursors<\/figcaption><\/figure><\/p>\n<p>Find the attached file below in the download section, where you have a more complete view of the values.<\/p>\n<h2>3. More About Cursor Pointer<\/h2>\n<p>The cursor pointer value is a default value for links, no need to add that while you have a normal anchor tag with href.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;a href=\"#\"&gt;This is a link&lt;\/a&gt;\r\n<\/pre>\n<p>Here is what it looks like (nothing special, you&#8217;ve seen this):<br \/>\n<figure id=\"attachment_5901\" aria-describedby=\"caption-attachment-5901\" style=\"width: 716px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-1.jpg\" alt=\"Links have default pointer value applied to the cursor property\" width=\"716\" height=\"119\" class=\"size-full wp-image-5901\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-1.jpg 716w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-1-300x50.jpg 300w\" sizes=\"(max-width: 716px) 100vw, 716px\" \/><\/a><figcaption id=\"caption-attachment-5901\" class=\"wp-caption-text\">Links have default pointer value applied to the cursor property<\/figcaption><\/figure><br \/>\nBut, consider having expandable li elements or buttons, you&#8217;d have to add the cursor pointer by yourself like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;li style=\"cursor:pointer\"&gt;This sentence might be an expandable section.&lt;\/li&gt;\r\n&lt;button style=\"cursor:pointer\"&gt;Button Here&lt;\/button&gt;\r\n<\/pre>\n<p>We&#8217;d have the following view of the pointer in the browser:<br \/>\n<figure id=\"attachment_5903\" aria-describedby=\"caption-attachment-5903\" style=\"width: 716px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-2.jpg\" alt=\"Button and List Element with Cursor Pointer\" width=\"716\" height=\"119\" class=\"size-full wp-image-5903\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-2.jpg 716w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/pointer-2-300x50.jpg 300w\" sizes=\"(max-width: 716px) 100vw, 716px\" \/><\/a><figcaption id=\"caption-attachment-5903\" class=\"wp-caption-text\">Button and List Element with Cursor Pointer<\/figcaption><\/figure><\/p>\n<p>But what happens if an anchor tag does not have a href next to it? Well, the default pointer won&#8217;t show, and you have to add it as an attribute. I have done that in the download files.<\/p>\n<h2>4. Conclusion<\/h2>\n<p>The cursor property is an all-in-one solution for indicating different actions one will take, in a visual manner. It makes it easier for the user to be aware of what&#8217;s ahead. It wraps up around twenty different values that we explained above. Next part, try them yourselves and create different states on &#8220;hover&#8221; to express the action elements apply. Refer to the downloadable files to see and find what value you need and keep in mind that some elements like links have a default pointer value pre set.<\/p>\n<h2>5. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/CSS-Cursor-Pointer.zip\"><strong>CSS Cursor Pointer<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we&#8217;ll go through the cursor property of CSS. More specifically, we&#8217;re going to exaplain the pointer property value. The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element. In the case of the pointer value, the cursor is a pointer and indicates a link. The &hellip;<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5890","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Cursor Pointer Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we&#039;ll go through the cursor property of CSS. More specifically, we&#039;re going to exaplain the pointer property value. The cursor CSS\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Cursor Pointer Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we&#039;ll go through the cursor property of CSS. More specifically, we&#039;re going to exaplain the pointer property value. The cursor CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-23T09:15:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:16:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Cursor Pointer Example\",\"datePublished\":\"2015-07-23T09:15:29+00:00\",\"dateModified\":\"2018-01-08T12:16:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\"},\"wordCount\":987,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\",\"name\":\"CSS Cursor Pointer Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-23T09:15:29+00:00\",\"dateModified\":\"2018-01-08T12:16:14+00:00\",\"description\":\"In this example, we'll go through the cursor property of CSS. More specifically, we're going to exaplain the pointer property value. The cursor CSS\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Cursor Pointer Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Cursor Pointer Example - Web Code Geeks - 2026","description":"In this example, we'll go through the cursor property of CSS. More specifically, we're going to exaplain the pointer property value. The cursor CSS","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:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Cursor Pointer Example - Web Code Geeks - 2026","og_description":"In this example, we'll go through the cursor property of CSS. More specifically, we're going to exaplain the pointer property value. The cursor CSS","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-07-23T09:15:29+00:00","article_modified_time":"2018-01-08T12:16:14+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Cursor Pointer Example","datePublished":"2015-07-23T09:15:29+00:00","dateModified":"2018-01-08T12:16:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/"},"wordCount":987,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/","name":"CSS Cursor Pointer Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-23T09:15:29+00:00","dateModified":"2018-01-08T12:16:14+00:00","description":"In this example, we'll go through the cursor property of CSS. More specifically, we're going to exaplain the pointer property value. The cursor CSS","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-cursor-pointer-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Cursor Pointer Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5890"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5890\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}