diff options
author | Carolyn Wu <87150472+cw118@users.noreply.github.com> | 2022-03-08 09:19:10 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-08 16:19:10 +0800 |
commit | 1d5ed016a73e4cbb6f5ddb27a5ff04161be33c67 (patch) | |
tree | 2dd2627bfa31b7ee33834ca8c935989ce6aab37f /files | |
parent | 522c9f0c7ae5b6655156f4d566c17e2dc0820840 (diff) | |
download | translated-content-1d5ed016a73e4cbb6f5ddb27a5ff04161be33c67.tar.gz translated-content-1d5ed016a73e4cbb6f5ddb27a5ff04161be33c67.tar.bz2 translated-content-1d5ed016a73e4cbb6f5ddb27a5ff04161be33c67.zip |
CSS cursor fixes for zh and ko (#3934)
* Fix zh CSS cursor img srcs, specs and compat
* Image fixes for ko CSS cursor
Diffstat (limited to 'files')
-rw-r--r-- | files/ko/web/css/cursor/index.html | 105 | ||||
-rw-r--r-- | files/zh-cn/web/css/cursor/index.html | 99 | ||||
-rw-r--r-- | files/zh-tw/web/css/cursor/index.html | 107 |
3 files changed, 123 insertions, 188 deletions
diff --git a/files/ko/web/css/cursor/index.html b/files/ko/web/css/cursor/index.html index 8f21c218c2..d589439fc6 100644 --- a/files/ko/web/css/cursor/index.html +++ b/files/ko/web/css/cursor/index.html @@ -7,6 +7,7 @@ tags: - Reference - Web translation_of: Web/CSS/cursor +browser-compat: css.properties.cursor --- <div>{{CSSRef}}</div> @@ -59,7 +60,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> @@ -72,7 +73,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>플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.</td> </tr> <tr style="cursor: none;"> @@ -83,165 +84,165 @@ 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>콘텍스트 메뉴 사용 가능.</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>도움말 사용 가능.</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>링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.</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>프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (<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>프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (<code>progress</code>와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.</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>표의 칸이나 여러 칸을 선택할 수 있음.</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>십자 커서. 종종 비트맵 선택에 사용합니다.</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>글씨 선택 가능. 보통 I빔 모양입니다.</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>세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.</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>별칭이나 바로가기를 만드는 중.</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>복사하는 중.</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>움직이는 중.</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" style="float: left"></td> <td>현재 위치에 놓을 수 없음.<br> {{bug("275173")}}: Windows와 Mac OS X에서 <code>no-drop</code>은 <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>요청한 행동을 수행할 수 없음.</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>잡을 수 있음. (잡아서 이동)</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>잡고 있음. (잡아서 이동)</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>모든 방향으로 이동 가능. (패닝)<br> {{bug("275174")}}: Windows에서 <code>all-scroll</code>은 <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>항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.</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>항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.</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" style="border-style: solid; border-width: 0px"></td> <td rowspan="8" style="cursor: auto;">움직일 수 있는 모서리. 예를 들어, <code>se-resize</code> 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 <code>n-resize</code>와 <code>s-resize</code>는 <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;">양방향 크기 조절 커서.</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>확대/축소할 수 있음.</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> @@ -276,35 +277,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> - - -<div>{{Compat("css.properties.cursor")}}</div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/zh-cn/web/css/cursor/index.html b/files/zh-cn/web/css/cursor/index.html index 7d9e5fa50f..413624e5f5 100644 --- a/files/zh-cn/web/css/cursor/index.html +++ b/files/zh-cn/web/css/cursor/index.html @@ -9,6 +9,7 @@ tags: - NeedsTranslation - TopicStub translation_of: Web/CSS/cursor +browser-compat: css.properties.cursor --- <div>{{CSSRef}}</div> @@ -16,8 +17,6 @@ translation_of: Web/CSS/cursor <div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div> - - <h2 id="Syntax" name="Syntax">语法</h2> <pre class="brush: css no-line-numbers notranslate">/* 关键字值 */ @@ -63,7 +62,7 @@ cursor: unset; <tr> <th>类型</th> <th>CSS值</th> - <th></th> + <th style="width: 7.5em;">例子</th> <th>描述</th> </tr> <tr style="cursor: auto;"> @@ -77,7 +76,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>默认指针,通常是箭头。</td> </tr> <tr style="cursor: none;"> @@ -88,80 +87,80 @@ cursor: unset; <tr style="cursor: context-menu;"> <td rowspan="5" style="cursor: auto;">链接及状态</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><img alt="context-menu.png" src="context-menu.png"></td> <td>指针下有可用内容目录。</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>指示帮助</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>悬浮于连接上时,通常为手</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>程序后台繁忙,用户仍可交互 (与<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>程序繁忙,用户不可交互 (与<code>progress相反</code>).图标一般为沙漏或者表。</td> </tr> <tr style="cursor: cell;"> <td rowspan="4" style="cursor: auto;">选择</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><img alt="cell.gif" src="cell.gif"></td> <td>指示单元格可被选中</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>交叉指针,通常指示位图中的框选</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>指示文字可被选中</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>指示垂直文字可被选中</td> </tr> <tr style="cursor: alias;"> <td rowspan="7" style="cursor: auto;">拖拽</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><img alt="alias.gif" src="alias.gif"></td> <td>复制或快捷方式将要被创建</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>指示可复制</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>被悬浮的物体可被移动</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" style="float: left"></td> <td>当前位置不能扔下<br> {{ bug("275173") }}Windows或Mac OS X中 "no-drop 与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><img alt="not-allowed.gif" src="not-allowed.gif"></td> <td>不能执行</td> </tr> <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> <p>可抓取</p> @@ -170,89 +169,89 @@ cursor: unset; </tr> <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>抓取中</td> </tr> <tr style="cursor: all-scroll;"> <td rowspan="15" style="cursor: auto;">重设大小及滚动</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><img alt="all-scroll.gif" src="all-scroll.gif"></td> <td>元素可任意方向滚动 (平移).<br> {{ bug("275174") }}Windows中, "<em>all-scroll</em> 与 <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><img alt="col-resize.gif" src="col-resize.gif"></td> <td>元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头</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> <p>元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头</p> </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" style="border-style: solid; border-width: 0px"></td> <td rowspan="8" style="cursor: auto;">某条边将被移动。例如元素盒的东南角被移动时<code>使用se-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;">指示双向重新设置大小</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: zoom-in;"> <td rowspan="2">缩放</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><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td> <td rowspan="2" style="cursor: auto;"> <p>指示可被放大或缩小</p> </td> </tr> <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> @@ -263,7 +262,7 @@ cursor: unset; <dl> <dt> - {{csssyntax("cursor")}} + {{csssyntax}} </dt> </dl> @@ -290,31 +289,11 @@ cursor: unset; <h2 id="Specifications" name="Specifications">规范</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}</td> - <td>{{ Spec2('CSS3 UI') }}</td> - <td>增加了一些关键字,<code>url()的</code>位置语法</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>首次定义</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("css.properties.cursor")}}</p> +<p>{{Compat}}</p> <h2 id="See_also" name="See_also">参见</h2> 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> |