aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/web/css/cursor/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-tw/web/css/cursor/index.html')
-rw-r--r--files/zh-tw/web/css/cursor/index.html107
1 files changed, 42 insertions, 65 deletions
diff --git a/files/zh-tw/web/css/cursor/index.html b/files/zh-tw/web/css/cursor/index.html
index 5ded20bef8..2955f1add3 100644
--- a/files/zh-tw/web/css/cursor/index.html
+++ b/files/zh-tw/web/css/cursor/index.html
@@ -2,6 +2,7 @@
title: cursor
slug: Web/CSS/cursor
translation_of: Web/CSS/cursor
+browser-compat: css.properties.cursor
---
<div>{{CSSRef}}</div>
@@ -9,8 +10,6 @@ translation_of: Web/CSS/cursor
<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
-
-
<h2 id="語法">語法</h2>
<pre class="brush: css no-line-numbers">/* 關鍵字值 */
@@ -54,7 +53,7 @@ cursor: unset;
<tr>
<th scope="col">分類</th>
<th scope="col">CSS 值</th>
- <th scope="col">範例</th>
+ <th scope="col" style="width: 7.5em;">範例</th>
<th scope="col">備註說明</th>
</tr>
</thead>
@@ -67,7 +66,7 @@ cursor: unset;
</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><img alt="default.gif" src="default.gif"></td>
<td>The platform-dependent default cursor. Typically an arrow.</td>
</tr>
<tr style="cursor: none;">
@@ -78,166 +77,166 @@ cursor: unset;
<tr style="cursor: context-menu;">
<th rowspan="5" scope="row" style="cursor: auto;">連結與狀態</th>
<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><img alt="context-menu.png" src="context-menu.png"></td>
<td>A context menu is available.</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><img alt="help.gif" src="help.gif"></td>
<td>Help information is available.</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><img alt="pointer.gif" src="pointer.gif"></td>
<td>The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</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><img alt="progress.gif" src="progress.gif"></td>
<td>The program is busy in the background, but the user can still interact with the interface (in contrast to <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><img alt="wait.gif" src="wait.gif"></td>
<td>The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</td>
</tr>
<tr style="cursor: cell;">
<th rowspan="4" scope="row" style="cursor: auto;">選取</th>
<td><code>cell</code></td>
- <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+ <td><img alt="cell.gif" src="cell.gif"></td>
<td>The table cell or set of cells can be selected.</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><img alt="crosshair.gif" src="crosshair.gif"></td>
<td>Cross cursor, often used to indicate selection in a 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><img alt="text.gif" class="default" src="text.gif"></td>
<td>The text can be selected. Typically the shape of an I-beam.</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><img alt="vertical-text.gif" src="vertical-text.gif"></td>
<td>The vertical text can be selected. Typically the shape of a sideways I-beam.</td>
</tr>
<tr style="cursor: alias;">
<th rowspan="7" scope="row" style="cursor: auto;">拖曳</th>
<td><code>alias</code></td>
- <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+ <td><img alt="alias.gif" src="alias.gif"></td>
<td>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><img alt="copy.gif" class="default" src="copy.gif"></td>
<td>Something is to be copied.</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><img alt="move.gif" src="move.gif"></td>
<td>Something is to be moved.</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><img alt="no-drop.gif" class="lwrap" src="no-drop.gif"></td>
<td>An item may not be dropped at the current location.<br>
{{bug("275173")}}: On Windows and Mac OS X, <code>no-drop</code> is the same as <code>not-allowed</code>.</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><img alt="not-allowed.gif" src="not-allowed.gif"></td>
<td>The requested action will not be carried out.</td>
</tr>
- <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+ <tr id="grab" style="cursor: grab;">
<td><code>grab</code></td>
- <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+ <td><img alt="grab.gif" class="default" src="grab.gif"></td>
<td>Something can be grabbed (dragged to be moved).</td>
</tr>
- <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+ <tr style="cursor: grabbing;">
<td><code>grabbing</code></td>
- <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+ <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td>
<td>Something is being grabbed (dragged to be moved).</td>
</tr>
<tr style="cursor: all-scroll;">
<th rowspan="15" scope="row" style="cursor: auto;">改變尺寸與捲軸尺</th>
<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><img alt="all-scroll.gif" src="all-scroll.gif"></td>
<td>Something can be scrolled in any direction (panned).<br>
{{bug("275174")}}: On Windows, <code>all-scroll</code> is the same as <code>move</code>.</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><img alt="col-resize.gif" src="col-resize.gif"></td>
<td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</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><img alt="row-resize.gif" src="row-resize.gif"></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><img alt="Example of a resize towards the top cursor" src="n-resize.gif"></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.<br>
In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</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>
+ <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></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>
+ <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></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>
+ <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></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>
+ <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></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>
+ <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></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>
+ <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></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>
+ <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></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><img alt="3-resize.gif" class="default" src="3-resize.gif"></td>
<td rowspan="4" style="cursor: auto;">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>
+ <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></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>
+ <td><img alt="1-resize.gif" class="default" src="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>
+ <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td>
</tr>
- <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+ <tr style="cursor: zoom-in;">
<th rowspan="2" scope="row" style="cursor: auto;">縮放</th>
<td><code>zoom-in</code></td>
- <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+ <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td>
<td rowspan="2" style="cursor: auto;">
<p>Something can be zoomed (magnified) in or out.</p>
</td>
</tr>
- <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+ <tr style="cursor: zoom-out;">
<td><code>zoom-out</code></td>
- <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+ <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td>
</tr>
</tbody>
</table>
@@ -266,35 +265,13 @@ cursor: unset;
<h2 id="規格">規格</h2>
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- <th scope="col">Comment</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
- <td>{{Spec2('CSS3 Basic UI')}}</td>
- <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
- <td>{{Spec2('CSS2.1')}}</td>
- <td>Initial definition.</td>
- </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
<p>{{cssinfo}}</p>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
-
-
-<p>{{Compat("css.properties.cursor")}}</p>
+<p>{{Compat}}</p>
<h2 id="參照">參照</h2>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-12-28 19:02:21 +0000