diff options
Diffstat (limited to 'files/es/web/css/cursor/index.html')
| -rw-r--r-- | files/es/web/css/cursor/index.html | 322 |
1 files changed, 322 insertions, 0 deletions
diff --git a/files/es/web/css/cursor/index.html b/files/es/web/css/cursor/index.html new file mode 100644 index 0000000000..d8a0080831 --- /dev/null +++ b/files/es/web/css/cursor/index.html @@ -0,0 +1,322 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Referencia_CSS +translation_of: Web/CSS/cursor +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <a href="es/CSS/cursor">CSS:cursor</a> especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.</p> + +<ul> + <li><a href="es/CSS/Valor_inicial">CSS:Valor_inicial</a>:<code> <a href="es/CSS/auto">CSS:auto</a></code></li> + <li>Se aplica a: todos los elementos</li> + <li><a href="es/CSS/inheritance">CSS:inheritance</a>: Si</li> + <li>Porcentaje: N/A</li> + <li>Media: <a href="es/CSS/Media/Visual">CSS:Media:Visual</a>, <a href="es/CSS/Media/Interactivo">CSS:Media:Interactivo</a></li> + <li><a href="es/CSS/Valor_calculado">CSS:Valor_calculado</a>:como sea especificado con URLs relativos convertidos a URLs absolutos.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | <a href="es/CSS/inherit">CSS:inherit</a> ; +</pre> + +<pre class="eval">cursor: [<url> [<x> <y>]?,]* <std-cursor-name> ; +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><url> {{ mediawiki.external(' ') }}? </dt> + <dd>URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea <a href="es/Uso_de_URL_como_valor_de_la_propiedad_cursor">Uso_de_URL_como_valor_de_la_propiedad_cursor</a> para mas detalles.</dd> + <dt><std-cursor-name></dt> + <dd>Algunos nombres de cursores se encuentra en la siguiente tabla.</dd> +</dl> + +<h4 id="Supported_CSS_standard_values" name="Supported_CSS_standard_values">Supported CSS standard values</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Categoría</th> + <th>nombre de CSS</th> + <th>Descripción</th> + </tr> + <tr> + <td rowspan="3">General</td> + <td style="cursor: auto;"><code>auto</code></td> + <td>El browser (user agent) determina el cursor que mostrara basado en el contenido presente.<br> + E.g. equivalent to <code>text</code> when hovering text</td> + </tr> + <tr> + <td style="cursor: default;"><code>default</code></td> + <td>default cursor (typically an arrow)</td> + </tr> + <tr> + <td style="cursor: none;"><code>none</code></td> + <td>no cursor is rendered {{ Fx_minversion_inline(3) }}</td> + </tr> + <tr> + <td rowspan="5">Links & status</td> + <td style="cursor: context-menu;"><code>context-menu</code></td> + <td>cursor indicating that a context menu is available under the cursor</td> + </tr> + <tr> + <td style="cursor: help;"><code>help</code></td> + <td>cursor indicating help is available</td> + </tr> + <tr> + <td style="cursor: pointer;"><code>pointer</code></td> + <td>cursor used when over links (typically a hand)</td> + </tr> + <tr> + <td style="cursor: progress;"><code>progress</code></td> + <td>cursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>)</td> + </tr> + <tr> + <td style="cursor: wait;"><code>wait</code></td> + <td>cursor indicating the program is busy (sometimes an hourglass or a watch)</td> + </tr> + <tr> + <td rowspan="4">Selection</td> + <td style="cursor: cell;"><code>cell</code></td> + <td>cursor indicating that cells can be selected</td> + </tr> + <tr> + <td style="cursor: crosshair;"><code>crosshair</code></td> + <td>cross cursor, often used to indicate selection in a bitmap</td> + </tr> + <tr> + <td style="cursor: text;"><code>text</code></td> + <td>cursor indicating text can be selected (typically an I-beam)</td> + </tr> + <tr> + <td style="cursor: vertical-text;"><code>vertical-text</code></td> + <td>cursor indicating that vertical text can be selected (typically a sideways I-beam)</td> + </tr> + <tr> + <td rowspan="5">Drag and drop</td> + <td style="cursor: alias;"><code>alias</code></td> + <td>cursor indicating an alias or shortcut is to be created</td> + </tr> + <tr> + <td style="cursor: copy;"><code>copy</code></td> + <td>cursor indicating that something can be copied</td> + </tr> + <tr> + <td style="cursor: move;"><code>move</code></td> + <td>the hovered object may be moved</td> + </tr> + <tr> + <td style="cursor: no-drop;"><code>no-drop</code></td> + <td>cursor showing that a drop is not allowed at the current location</td> + </tr> + <tr> + <td style="cursor: not-allowed;"><code>not-allowed</code></td> + <td>cursor showing that something cannot be done</td> + </tr> + <tr> + <td rowspan="15">Resize & scrolling</td> + <td style="cursor: all-scroll;"><code>all-scroll</code></td> + <td>cursor showing that something can be scrolled in any direction (panned)</td> + </tr> + <tr> + <td style="cursor: col-resize;"><code>col-resize</code></td> + <td>cursor for resizing columns horizontally</td> + </tr> + <tr> + <td style="cursor: e-resize;"><code>e-resize</code></td> + <td>cursor for resizing the right edge of a box</td> + </tr> + <tr> + <td style="cursor: ew-resize;"><code>ew-resize</code></td> + <td>cursor for resizing left or right</td> + </tr> + <tr> + <td style="cursor: n-resize;"><code>n-resize</code></td> + <td>cursor for resizing the top edge of a box</td> + </tr> + <tr> + <td style="cursor: ne-resize;"><code>ne-resize</code></td> + <td>cursor for resizing the top right corner of a box</td> + </tr> + <tr> + <td style="cursor: nesw-resize;"><code>nesw-resize</code></td> + <td>cursor for resizing in the top-right or bottom-left directions</td> + </tr> + <tr> + <td style="cursor: ns-resize;"><code>ns-resize</code></td> + <td>cursor for resizing up or down</td> + </tr> + <tr> + <td style="cursor: nw-resize;"><code>nw-resize</code></td> + <td>cursor for resizing the top left corner of a box</td> + </tr> + <tr> + <td style="cursor: nwse-resize;"><code>nwse-resize</code></td> + <td>cursor for resizing in the top-left or bottom-right directions</td> + </tr> + <tr> + <td style="cursor: row-resize;"><code>row-resize</code></td> + <td>cursor for resizing rows vertically</td> + </tr> + <tr> + <td style="cursor: s-resize;"><code>s-resize</code></td> + <td>cursor for resizing the bottom edge of a box</td> + </tr> + <tr> + <td style="cursor: se-resize;"><code>se-resize</code></td> + <td>cursor for resizing the bottom right corner of a box</td> + </tr> + <tr> + <td style="cursor: sw-resize;"><code>sw-resize</code></td> + <td>cursor for resizing the bottom left corner of a box</td> + </tr> + <tr> + <td style="cursor: w-resize;"><code>w-resize</code></td> + <td>cursor for resizing the left edge of a box</td> + </tr> + </tbody> +</table> + +<h4 id="Extended_Gecko_CSS_values" name="Extended_Gecko_CSS_values">Extended Gecko CSS values</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>CSS name</th> + <th>Description</th> + <th>Deprecation</th> + </tr> + <tr> + <td style="cursor: -moz-alias;"><code><a href="es/CSS/-moz-alias">-moz-alias</a></code></td> + <td>replaced by standard value <code>alias</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-cell;"><code><a href="es/CSS/-moz-cell">-moz-cell</a></code></td> + <td>replaced by standard value <code>cell</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-context-menu;"><code><a href="es/CSS/-moz-context-menu">-moz-context-menu</a></code></td> + <td>replaced by standard value <code>context-menu</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-copy;"><code><a href="es/CSS/-moz-copy">-moz-copy</a></code></td> + <td>replaced by standard value <code>copy</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-grab;"><code><a href="es/CSS/-moz-grab">-moz-grab</a></code></td> + <td>a cursor value that should indicate that an element or an object in a webpage can be grabbed</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-grabbing;"><code><a href="es/CSS/-moz-grabbing">-moz-grabbing</a></code></td> + <td>a cursor value that should indicate that an element or an object is currently being grabbed</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-spinning;"><code><a href="es/CSS/-moz-spinning">-moz-spinning</a></code></td> + <td>replaced by standard value <code>progress</code> as described in the previous table</td> + <td>Gecko 1.7.1</td> + </tr> + <tr> + <td style="cursor: -moz-zoom-in;"><code><a href="es/CSS/-moz-zoom-in">-moz-zoom-in</a></code></td> + <td>used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-zoom-out;"><code><a href="es/CSS/-moz-zoom-out">-moz-zoom-out</a></code></td> + <td>used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Examples" name="Examples">Examples</h3> + +<p><a href="/samples/cssref/cursor.html">Ver El Ejemplo Vivo</a></p> + +<pre>Inline: + +<span style="cursor: crosshair">Some Text</span> + +External: + +.pointer { + cursor: pointer; +} +.move { + cursor: move; +} + +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>While this property works on older browsers, not all values are fully supported.</p> + +<h3 id="Specifications" name="Specifications">Specifications</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li> +</ul> + +<h3 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version (<code><std-cursor-name></code>)</th> + <th>Lowest Version (<code><url></code>)</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + <td>6 (only <code>.cur</code> files)</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.0</td> + <td>1.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + <td>8</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + <td>-</td> + </tr> + <tr> + <td>Konqueror</td> + <td>3.1</td> + <td>3.1</td> + </tr> + <tr> + <td>Safari</td> + <td>1.2</td> + <td>1.2</td> + </tr> + <tr> + <td>Safari (Win)</td> + <td>3.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> + +<h3 id="See_also" name="See_also">See also</h3> + +<p>{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}</p> |