diff options
Diffstat (limited to 'files/pt-br/web/css/cursor/index.html')
-rw-r--r-- | files/pt-br/web/css/cursor/index.html | 529 |
1 files changed, 529 insertions, 0 deletions
diff --git a/files/pt-br/web/css/cursor/index.html b/files/pt-br/web/css/cursor/index.html new file mode 100644 index 0000000000..9a9c6af5af --- /dev/null +++ b/files/pt-br/web/css/cursor/index.html @@ -0,0 +1,529 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - Cursor + - Referencia +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade CSS <strong>cursor</strong> especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css notranslate">/* Keywords */ +cursor: pointer; +cursor: auto; + +/* Usando URL e cordenadas */ +cursor: url(cursor1.png) 4 12, auto; +cursor: url(cursor2.png) 2 2, pointer; + +/* Valores globais */ +cursor: inherit; +cursor: initial; +cursor: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><<code>uri</code>></dt> + <dd>Uma url(...) ou uma lista de url(...) separada por vírgula, apontando para uma arquivo de imagem. Mais que uma {{cssxref("<uri>")}} pode ser fornecida como fallback, em caso de alguns tipos de imagem não ser suportado. Um fallback não-URL (um ou mais dos outros valores) <strong>deve</strong> estar no final da lista de fallbacks. Veja <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Usando valores URL para a propriedade cursor</a> para mais detalhes.</dd> + <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> + <dd>Coordenadas x e y opcionais. Dois números não-negativos, sem unidade e menores que 32.</dd> + <dt>Keyword values</dt> + <dd> + <p><strong style="color: red; font-size: big;">Mova o mouse sobre os valores para testar:</strong></p> + + <table class="standard-table"> + <tbody> + <tr> + <th>Categoria</th> + <th style="width: 7.5em;">Valor CSS</th> + <th>Actual</th> + <th>Descrição</th> + </tr> + <tr style="cursor: auto;"> + <td rowspan="3">General</td> + <td><code>auto</code></td> + <td> </td> + <td>O brower determina o cursor para ser exibido baseado no contexto atual.</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor padrão, tipicamente uma seta.</td> + </tr> + <tr style="cursor: none;"> + <td><code>none</code></td> + <td> </td> + <td>Nenhum cursor é mostrado.</td> + </tr> + <tr style="cursor: context-menu;"> + <td rowspan="5" style="cursor: auto;">Links & status</td> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> + <td>Um menu de contexto está disponível sob o cursor.<br> + Somente IE 10 e superior implementou esta propriedade no Windows: {{Bug("258960")}}.</td> + </tr> + <tr style="cursor: help;"> + <td><code>help</code></td> + <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> + <td>Indicando que ajuda está disponível.</td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> + <td>E.g. Usado quando pairando o cursor sobre links, tipicamente uma mão.</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> + <td>O programa está processando em segundo plano. mas o o usuário ainda pode interagir com a interface (diferente de <code>wait</code>).</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> + <td>O programa está ocupado (às vezes uma ampulheta ou relógio).</td> + </tr> + <tr style="cursor: cell;"> + <td rowspan="4" style="cursor: auto;">Selection</td> + <td><code>cell</code></td> + <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que a célula pode ser selecionada.</td> + </tr> + <tr style="cursor: crosshair;"> + <td><code>crosshair</code></td> + <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor de cruz, normalmente usado para indicar seleção em uma imagem bitmap.</td> + </tr> + <tr style="cursor: text;"> + <td><code>text</code></td> + <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que o texto pode ser selecionado, normalmente um I maiúsculo.</td> + </tr> + <tr style="cursor: vertical-text;"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que o texto vertical text can be selected, normalmente um I maiúsculo virado de lado.</td> + </tr> + <tr style="cursor: alias;"> + <td rowspan="5" style="cursor: auto;">Drag and drop</td> + <td><code>alias</code></td> + <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating an alias or shortcut is to be created.</td> + </tr> + <tr style="cursor: copy;"> + <td><code>copy</code></td> + <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que algo será copiado.</td> + </tr> + <tr style="cursor: move;"> + <td><code>move</code></td> + <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> + <td>O item sob o mouse pode ser movido.</td> + </tr> + <tr style="cursor: no-drop;"> + <td><code>no-drop</code></td> + <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> + <td>Cursor showing that a drop is not allowed at the current location.<br> + {{bug("275173")}} on Windows and Mac OS X, "no-drop is the same as not-allowed".</td> + </tr> + <tr style="cursor: not-allowed;"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor showing that something cannot be done.</td> + </tr> + <tr style="cursor: all-scroll;"> + <td rowspan="15" style="cursor: auto;">Resize & scrolling</td> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor showing that something can be scrolled in any direction (panned).<br> + {{bug("275174")}} on Windows, "<em>all-scroll</em> is the same as <em>move</em>".</td> + </tr> + <tr style="cursor: col-resize;"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> + <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.</td> + </tr> + <tr style="cursor: row-resize;"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> + <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td> + </tr> + <tr style="cursor: n-resize;"> + <td><code>n-resize</code></td> + <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> + <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.</td> + </tr> + <tr style="cursor: e-resize;"> + <td><code>e-resize</code></td> + <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: s-resize;"> + <td><code>s-resize</code></td> + <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: w-resize;"> + <td><code>w-resize</code></td> + <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ne-resize;"> + <td><code>ne-resize</code></td> + <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nw-resize;"> + <td><code>nw-resize</code></td> + <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: se-resize;"> + <td><code>se-resize</code></td> + <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: sw-resize;"> + <td><code>sw-resize</code></td> + <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ew-resize;"> + <td><code>ew-resize</code></td> + <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> + <td rowspan="4" style="cursor: auto;">Indicates a bidirectional resize cursor.</td> + </tr> + <tr style="cursor: ns-resize;"> + <td><code>ns-resize</code></td> + <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nesw-resize;"> + <td><code>nesw-resize</code></td> + <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> + </tr> + <tr style="cursor: nwse-resize;"> + <td><code>nwse-resize</code></td> + <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style=""> + <td rowspan="2">Zoom</td> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be zoomed (magnified) in or out.</p> + </td> + </tr> + <tr style=""> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + </tr> + <tr id="grab" style=""> + <td rowspan="2">Grab</td> + <td><code>grab</code></td> + <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be grabbed (dragged to be moved).</p> + </td> + </tr> + <tr style=""> + <td><code>grabbing</code></td> + <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css notranslate">.foo { + cursor: crosshair; +} + +/* use velor prefixado se "zoom-in" não for suportado */ +.bar { + cursor: -webkit-zoom-in; + cursor: zoom-in; +} + +/* valor padrão como fallback para url() deve ser fornecido (não funciona sem) */ +.baz { + cursor: url(hyper.cur), auto; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Adição de várias keywords e sintaxe de posicionamento para url().</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br> + <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br> + <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td> + <td>1.0</td> + <td>1.0</td> + <td>4.0<sup>[1]</sup></td> + <td>7.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>pointer</code>, <code>progress</code></td> + <td>1.0</td> + <td>1.0</td> + <td>6.0</td> + <td>7.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>url()</code></td> + <td>1.0</td> + <td>1.5<br> + 4.0<sup>[2]</sup></td> + <td>6.0</td> + <td>{{CompatUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td>Positioning syntax for <code>url()</code> values {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br> + <code>col-resize</code>, <code>row-resize</code></td> + <td>1.0</td> + <td>1.5</td> + <td>6.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br> + <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td> + <td>1.0</td> + <td>1.5</td> + <td>10.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>context-menu</code></td> + <td>1.0<sup>[3]</sup></td> + <td>1.5<sup>[3]</sup></td> + <td>10.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>none</code></td> + <td>5.0</td> + <td>3.0</td> + <td>9.0</td> + <td>15.0</td> + <td>5.0</td> + </tr> + <tr> + <td><code>inherit</code></td> + <td>1.0</td> + <td>1.0</td> + <td>8.0</td> + <td>9.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>zoom-in</code>, <code>zoom-out</code></td> + <td> + <p>1.0 {{property_prefix("-webkit-")}}<br> + 37</p> + </td> + <td>1.0 {{property_prefix("-moz-")}}<br> + 24.0</td> + <td>{{CompatNo}}</td> + <td>11.6<br> + 15-23 {{property_prefix("-webkit-")}}<br> + 24</td> + <td>3.0 {{property_prefix("-webkit-")}}<br> + 9</td> + </tr> + <tr> + <td><code>grab</code>, <code>grabbing</code></td> + <td>1.0 {{property_prefix("-webkit-")}}<br> + 22.0 {{property_prefix("-webkit-")}}<sup>[4]</sup></td> + <td>1.5 {{property_prefix("-moz-")}}<br> + 27.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{property_prefix("-webkit-")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br> + <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br> + <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>pointer</code>, <code>progress</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>url()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Positioning syntax for <code>url()</code> values {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br> + <code>col-resize</code>, <code>row-resize</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br> + <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>context-menu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>none</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>inherit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>zoom-in</code>, <code>zoom-out</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>grab</code>, <code>grabbing</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] No IE11, quando cursor é aplicado em um elemento e este elemento está por baixo de um menu {{HTMLElement("select")}} aberto e o usuário paira sobre um item do menu {{HTMLElement("select")}} que está no sobre o elemento em questão, o cursor deste elemento será mostrado em vez do cursor do {{HTMLElement("select")}}. Veja <a href="https://connect.microsoft.com/IE/feedbackdetail/view/963961">IE bug 963961</a>.</p> + +<p>[2] Suporte para este foi adicionado no Mac OS X.</p> + +<p>[3] Apenas suportado no Mac OS X e Linux.</p> + +<p>[4] Suporte para isto foi adicionado no Windows.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Usando valores URL para a propriedade cursor</a></li> + <li>{{cssxref("pointer-events")}}</li> + <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Propriedade cursor (MSDN)</a></li> +</ul> |