index.html

--- layout: single property_name: cursor ---<section id="cursor" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/cursor/" data-property-name="cursor" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="cursor">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/cursor" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#cursor"><span>#</span>cursor</a></h2><div class="property-description"><p>Sets the mouse cursor when hovering the element.</p></div></header><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: default;">cursor: default;</code></p><div class="example-description"><p>Sets the cursor to the element&#39;s default value. For a link, it would be a pointer. For text it would be a selection cursor.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-default"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-default{ cursor:default;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: auto;">cursor: auto;</code></p><div class="example-description"><p>auto</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-auto"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-auto{ cursor:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: pointer;">cursor: pointer;</code></p><div class="example-description"><p>pointer</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-pointer"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-pointer{ cursor:pointer;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: move;">cursor: move;</code></p><div class="example-description"><p>move</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-move"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-move{ cursor:move;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: crosshair;">cursor: crosshair;</code></p><div class="example-description"><p>crosshair</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-crosshair"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-crosshair{ cursor:crosshair;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: text;">cursor: text;</code></p><div class="example-description"><p>text</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-text"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-text{ cursor:text;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: wait;">cursor: wait;</code></p><div class="example-description"><p>wait</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-wait"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-wait{ cursor:wait;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: helpe-resize;">cursor: helpe-resize;</code></p><div class="example-description"><p>helpe-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-helpe-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-helpe-resize{ cursor:helpe-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: ne-resize;">cursor: ne-resize;</code></p><div class="example-description"><p>ne-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-ne-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-ne-resize{ cursor:ne-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: nw-resize;">cursor: nw-resize;</code></p><div class="example-description"><p>nw-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-nw-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-nw-resize{ cursor:nw-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: n-resize;">cursor: n-resize;</code></p><div class="example-description"><p>n-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-n-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-n-resize{ cursor:n-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: se-resize;">cursor: se-resize;</code></p><div class="example-description"><p>se-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-se-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-se-resize{ cursor:se-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: sw-resize;">cursor: sw-resize;</code></p><div class="example-description"><p>sw-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-sw-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-sw-resize{ cursor:sw-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: s-resize;">cursor: s-resize;</code></p><div class="example-description"><p>s-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-s-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-s-resize{ cursor:s-resize;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: w-resize;">cursor: w-resize;</code></p><div class="example-description"><p>w-resize</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div cursor" id="cursor-w-resize"><p>Hello world</p></div></div></aside><style type="text/css">#cursor-w-resize{ cursor:w-resize;}</style></section></section>