{"id":3007,"date":"2016-09-12T03:54:18","date_gmt":"2016-09-12T08:54:18","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1933"},"modified":"2016-09-12T03:54:18","modified_gmt":"2016-09-12T08:54:18","slug":"how-to-style-your-cursor-with-css3","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-style-your-cursor-with-css3\/","title":{"rendered":"How to Style Your Cursor with CSS3"},"content":{"rendered":"

There are\u00a0so<\/em> many different ways to style your cursor using CSS3. Most developers probably know about cursor: pointer, but what about the dozens of other ways to have your cursor appear? What follows is a list of some of the most useful cursor styles. Combine them with the :hover pseudo-selector for your styling to take effect once the designated HTML element has been hovered upon.<\/p>\n

Crosshair<\/strong><\/p>\n

This will make your cursor render as a crosshair symbol.<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. .element<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
  2. cursor<\/span>:<\/span> crosshair<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Wait<\/strong><\/p>\n

    This will render your cursor as an animated icon\u00a0(the spinning ball we’re sadly all so familiar with) to indicate that the user has to wait for the program to catch up, or that something is in progress.<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. .element<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
    2. cursor<\/span>:<\/span> wait<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Alias<\/strong><\/p>\n

      When your cursor is rendered as an alias icon, that usually means that an action can be performed that will create an alias or a copy of something.<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. .element<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
      2. cursor<\/span>:<\/span> alias;<\/span><\/div><\/li>\n
      3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        Copy<\/strong><\/p>\n

        The description of the copy function probably sounds very similar to alias, but the icons\u00a0for each value are very different. While the alias icon\u00a0is a curved arrow, the copy symbol is a cursor with a ‘plus’ icon\u00a0attached, indicating that something can be copied.<\/p>\n

        \r\n\r\n\t\t
        \r\n\r\n\t\t
        \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
        css<\/div>\r\n\r\n\t\t\r\n\t\t
        \r\n\r\n\t<\/div>\r\n\t\r\n\t
        \r\n\t\t
        1. .element<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
        2. cursor<\/span>:<\/span> copy;<\/span><\/div><\/li>\n
        3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

          Zoom<\/strong><\/p>\n

          The zoom-in and z00m-out values are pretty self explanatory. Zoom-in is an icon with a plus in the center, while zoom-out is the same icon\u00a0but with a minus in the center.<\/p>\n

          \r\n\r\n\t\t
          \r\n\r\n\t\t
          \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
          css<\/div>\r\n\r\n\t\t\r\n\t\t
          \r\n\r\n\t<\/div>\r\n\t\r\n\t
          \r\n\t\t
          1. .element<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
          2. cursor<\/span>:<\/span> zoom-in;<\/span><\/div><\/li>\n
          3. }<\/span><\/div><\/li>\n
          4.  <\/div><\/li>\n
          5. &lt;<\/span>\/pre&gt;<\/span><\/div><\/li>\n
          6. &lt;<\/span>pre&gt;<\/span>.other-element<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
          7. cursor<\/span>:<\/span> zoom-out;<\/span><\/div><\/li>\n
          8. }<\/span>&lt;<\/span>\/pre&gt;<\/span><\/div><\/li>\n
          9. &lt;<\/span>pre&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

            *cursors may render differently on different browsers.<\/p>\n

            Share and Enjoy !<\/h3>
            0<\/span><\/span>Shares<\/small><\/div>
            <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

            There are\u00a0so many different ways to style your cursor using CSS3. Most developers probably know about cursor: pointer, but what about the dozens of other ways to have your cursor appear? What follows is a list of some of the […]<\/p>\n

            Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3007"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3007"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3007\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}