Definition und Verwendung des CSS-Cursors

零下一度

Freigeben： 2017-07-17 15:44:44

Original

3305 Leute haben es durchsucht

cursor:hand

im CSS-Attribut So stellen Sie die Maus auf Handtyp unter IE ein: Cursor: Hand, aber in FIREFOX Wenn es ungültig ist, besteht die Lösung darin, in FIREFOX Folgendes festzulegen: Cursor: Zeiger.

Und dieser Zeigerwert ist unter IE und FIREFOX üblich, daher verwenden wir: Cursor:Zeiger .

Im Allgemeinen wird die Maus als nach oben gerichteter diagonaler Pfeil angezeigt. Wenn sie über den Text bewegt wird, wird sie zu einer vertikalen Linie mit einem Kopf. es wird eine Handform.

Aber Sie können CSS verwenden, um den Anzeigeeffekt der Maus zu steuern. Sie können beispielsweise die Maus über normalen Text bewegen und ihn als Handform anzeigen.

1. Definition und Verwendung

Das Cursor-Attribut gibt den Typ (die Form) des anzuzeigenden Cursors an.

Dieses Attribut definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird (CSS2.1 definiert jedoch nicht, welche Grenzen diesen Bereich bestimmen).

2. Attribute

url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

url

Die URL des benutzerdefinierten Cursors, der verwendet werden soll.

Hinweis: Definieren Sie immer einen normalen Cursor am Ende dieser Liste, falls kein verfügbarer Cursor durch die URL definiert ist.

Standard

Standardcursor (normalerweise ein Pfeil)

automatisch td >

Standard. Der vom Browser gesetzte Cursor.

Fadenkreuz

Der Cursor wird als Fadenkreuz dargestellt.

Zeiger

Der Cursor wird als Zeiger (eine Hand) dargestellt, der den Link anzeigt

move

Dieser Cursor zeigt an, dass ein Objekt verschoben werden kann.

e-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach rechts (Osten) verschoben werden kann.

ne-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach rechts (Norden/Osten) verschoben werden kann.

nw-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach links (Norden/Westen) verschoben werden kann.

n-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben (Norden) verschoben werden kann.

se-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach rechts (Süden/Osten) verschoben werden kann.

sw-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach links (Süden/Westen) verschoben werden kann.

s-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten (Süden) verschoben werden kann.

w-resize

Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach links (Westen) verschoben werden kann.

Text

Dieser Cursor zeigt Text an.

Warten

Dieser Cursor zeigt an, dass das Programm beschäftigt ist (normalerweise eine Uhr oder eine Sanduhr).

Hilfe

Dieser Cursor zeigt verfügbare Hilfe an (normalerweise ein Fragezeichen oder eine Sprechblase).

3. Unterstützte Browser

Alle gängigen Browser unterstützen das Cursor-Attribut.

Hinweis: Opera 9.3 und Safari 3 unterstützen den Wert

URL

nicht.

<html>

    <body>
        <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
        <span style="cursor:auto">Auto</span><br />
        <span style="cursor:crosshair">Crosshair</span><br />
        <span style="cursor:default">Default</span><br />
        <span style="cursor:pointer">Pointer</span><br />
        <span style="cursor:move">Move</span><br />
        <span style="cursor:e-resize">e-resize</span><br />
        <span style="cursor:ne-resize">ne-resize</span><br />
        <span style="cursor:nw-resize">nw-resize</span><br />
        <span style="cursor:n-resize">n-resize</span><br />
        <span style="cursor:se-resize">se-resize</span><br />
        <span style="cursor:sw-resize">sw-resize</span><br />
        <span style="cursor:s-resize">s-resize</span><br />
        <span style="cursor:w-resize">w-resize</span><br />
        <span style="cursor:text">text</span><br />
        <span style="cursor:wait">wait</span><br />
        <span style="cursor:help">help</span>
    </body>

</html>

Nach dem Login kopieren

Hinweis: Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.

4.html-Code

Das obige ist der detaillierte Inhalt vonDefinition und Verwendung des CSS-Cursors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!