cursor: Mauszeiger

0 | 0 Kommentare | 1901 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "cursor: Mauszeiger" mit Ihrem Wissen!

Anzeige Hier werben

cursor

Werte: CSS2: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, inherit, none, progress, <URI>. Mit CSS3 hinzugekommen: copy, alias, context-menu, cell, all-scroll, col-resize, row-resize, no-drop, not-allowed, vertical-text, <x>/<y>
Standardwert: auto
Vererbung: Ja
Anwendbar auf: alle Elemente
CSS-Level: CSS2, CSS3

Mithilfe der CSS Eigenschaft cursor lässt sich das Aussehen des Mauszeigers steuern.

Die Darstellung variiert von Browser zu Browser und vor allem von Betriebssystem zu Betriebssystem.

Besondere

Firefox2Unterstützt3Unterstützt3.5Unbekannt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
39%
Besondere Zeiger
Aussehen
 Wert
 Beschreibung
 Sinn

auto
 Vordefinierter Zeiger des Browsers
 normales Surfen
Bild zu cursor: Mauszeiger
 default
 Standardzeiger des Betriebssystems

none
 kein Zeiger

inherit
 Zeiger des Mutterelements

CSS2.1

Firefox2Unterstützt3Unterstützt3.5Unbekannt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
39%
CSS2.1-Zeiger
Aussehen
Wert
Beschreibung
 Sinn
Bild zu cursor: Mauszeiger
 crosshair Fadenkreuz
Bild zu cursor: Mauszeiger
 help Standardzeiger mit Fragezeigen
 Hilfe
Bild zu cursor: Mauszeiger
 move Vier-Richtungen-Zeiger Ziehbewegung
Bild zu cursor: Mauszeiger
 hand (veraltet), pointer Zeigerhand Link (Klick)
Bild zu cursor: Mauszeiger
 text Textmarkierer Selektierbarer Text
Bild zu cursor: Mauszeiger
 wait Sanduhr, Ball
 Ladevorgang (Warten)
Bild zu cursor: Mauszeiger
 progress, -moz-spinning (Firefox) Standardzeiger mit Sanduhr, Ball (in CSS3 neu vorspezifiziert)
 Ladevorgang (Warten)
Bild zu cursor: Mauszeiger
 n-resize Pfeil nach oben Blockgröße ändern
Bild zu cursor: Mauszeiger
 ne-resize Pfeil nach oben rechts "
Bild zu cursor: Mauszeiger
 e-resize Pfeil nach rechts "
Bild zu cursor: Mauszeiger
 se-resize Pfeil nach rechts unten "
Bild zu cursor: Mauszeiger
 s-resize Pfeil nach unten "
Bild zu cursor: Mauszeiger
 sw-resize Pfeil nach unten links "
Bild zu cursor: Mauszeiger
 w-resize Pfeil nach links "
Bild zu cursor: Mauszeiger
 nw-resize Pfeil nach links oben "
url(<URI>) beliebiger Cursor (GIF-, JPEG-, ANI-, CUR-, ICO-Datei oder mehrere gleichzeitig), mit <x>/<y> kann der genaue Pixel festgelegt werden, der als Aktionspunkt (Hotspot) dient
 spezielle Anwendungsfälle, individuelleres Interface

CSS3 (mit IE)

Firefox2Unbekannt3Unterstützt3.5Unbekannt
IE6Unbekannt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
37%
CSS3-Zeiger mit IE
Wert
Beschreibung
 Sinn
all-scroll Vier-Richtungen-Scrollzeiger In vier Richtungen scrollen
col-resize Verschiebezeiger, horizontal
 Horizontal in der Größe verändern
row-resize Verschiebezeiger, vertikal
 Vertikal in der Größe verändern
no-drop Standardzeiger mit Verbotsschild
 Kein Ziehen möglich
not-allowed Verbotschild Interaktion verboten
vertical-text Textmarkierer, vertikal
 Vertikal selektierbarer Text
alias, -moz-alias (Firefox)
 Standardzeiger mit Verknüpfungssymbol
 Alias erstellen
context-menu, -moz-context-menu (Firefox)
 Standardzeiger mit Menü-Symbol
 Kontextmenü aufklappen

CSS3 (ohne IE)

Firefox2Unbekannt3Unterstützt3.5Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
2%
CSS3-Zeiger ohne IE
Wert
Beschreibung
 Sinn
grab, -moz-grab (Firefox)
 Hand
 Objekt ziehen
grabbing, -moz-grabbing (Firefox)
 Packende Hand
 Objekt ziehend
cell, -moz-cell (Firefox) Zellenmarkierzeiger Zellen markieren
copy, -moz-copy (Firefox) Standardzeiger mit Kopiersymbol Text kopieren
<x> <y>
 x-y-Koordinate des Zeigers (Hotspot-Position)
 Positionierung (z.B. auf Button)

Browserspezifische Werte von Mozilla (Firefox)

Firefox2Unbekannt3Unterstützt3.5Unbekannt
IE6Nein7Nein8Nein
Opera9.5Nein10Unbekannt
Safari3Nein4Nein
1%
CSS3-Zeiger speziell für Mozilla/Firefox
Wert
Beschreibung
 Sinn
-moz-spinning s.o. s.o.
-moz-grab s.o. s.o.
-moz-grabbing s.o. s.o.
-moz-zoom-in Zoomsymbol, hinein (bug 189719)
 Hineinzoomen
-moz-zoom-out Zoomsymbol, heraus
 Herauszoomen
-moz-copy s.o. s.o.
-moz-alias s.o. s.o.
-moz-cell s.o. s.o.
-moz-context-menu s.o. s.o.
-moz-count-up unbekannt
-moz-count-down unbekannt
-moz-count-up-down unbekannt

Beispiel

Alle 46 mauszeiger  
Dieses Beispiel ausprobieren
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
    <style type="text/css">
    
    A {
        display: block;
        height: 30px;
        background: #CCC;
        margin-bottom: 5px;
    }
    
    #c1:hover {cursor: auto;}   
    #c2:hover {cursor: crosshair;}  
    #c3:hover {cursor: default;}
    #c4:hover {cursor: pointer;}    
    #c5:hover {cursor: hand;}   
    #c6:hover {cursor: move;}
    #c7:hover {cursor: e-resize;}   
    #c8:hover {cursor: ne-resize;}  
    #c9:hover {cursor: nw-resize;}
    #c10:hover {cursor: n-resize;}  
    #c11:hover {cursor: se-resize;} 
    #c12:hover {cursor: sw-resize;}
    #c13:hover {cursor: s-resize;}  
    #c14:hover {cursor: w-resize;}  
    #c15:hover {cursor: text;}  
    #c16:hover {cursor: wait;}
    #c17:hover {cursor: help;}  
    #c18:hover {cursor: inherit;}   
    #c19:hover {cursor: none;}
    #c20:hover {cursor: url("http://mt15.quickshareit.com/share/cursor3e6c4.jpg" "http://mt12.quickshareit.com/share/cursor22252.ico" "http://mt15.quickshareit.com/share/cursorad9f3.gif");}   
    #c21:hover {cursor: alias;} 
    #c22:hover {cursor: -moz-alias;}    
    #c23:hover {cursor: context-menu;}
    #c24:hover {cursor: -moz-context-menu;} 
    #c25:hover {cursor: all-scroll;}    
    #c26:hover {cursor: col-resize;}
    #c27:hover {cursor: row-resize;}    
    #c28:hover {cursor: no-drop;}   
    #c29:hover {cursor: not-allowed;}
    #c30:hover {cursor: vertical-text;} 
    #c31:hover {cursor: 0 0;}   
    #c32:hover {cursor: progress;}
    #c33:hover {cursor: -moz-spinning;} 
    #c34:hover {cursor: grab;}  
    #c35:hover {cursor: -moz-grab;} 
    #c36:hover {cursor: grabbing;}  
    #c37:hover {cursor: -moz-grabbing;}
    #c38:hover {cursor: cell;}
    #c39:hover {cursor: -moz-cell;} 
    #c40:hover {cursor: copy;}  
    #c41:hover {cursor: -moz-copy;}
    #c42:hover {cursor: -moz-zoom-in;}  
    #c43:hover {cursor: -moz-zoom-out;} 
    #c44:hover {cursor: -moz-count-up;} 
    #c45:hover {cursor: -moz-count-down;}
    #c46:hover {cursor: -moz-count-up-down;}    
    </style>
</head>
<body>
    
    <a href="#" id="c1">auto</a>
    
    <a href="#" id="c2">crosshair</a>
    
    <a href="#" id="c3">default</a>
    
    <a href="#" id="c4">pointer</a>
    
    <a href="#" id="c5">hand</a>
    
    <a href="#" id="c6">move</a>
    
    <a href="#" id="c7">e-resize</a>
    
    <a href="#" id="c8">ne-resize</a>
    
    <a href="#" id="c9">nw-resize</a>
    
    <a href="#" id="c10">n-resize</a>
    
    <a href="#" id="c11">se-resize</a>
    
    <a href="#" id="c12">sw-resize</a>
    
    <a href="#" id="c13">s-resize</a>
    
    <a href="#" id="c14">w-resize</a>
    
    <a href="#" id="c15">text</a>
    
    <a href="#" id="c16">wait</a>
    
    <a href="#" id="c17">help</a>
    
    <a href="#" id="c18">inherit</a>
    
    <a href="#" id="c19">none</a>
    
    <a href="#" id="c20">URI</a>
    
    <a href="#" id="c21">alias</a>
    <a href="#" id="c22">-moz-alias</a> 
    
    <a href="#" id="c23">context-menu</a>
    <a href="#" id="c24">-moz-context-menu</a>
    
    <a href="#" id="c25">all-scroll</a>
    
    <a href="#" id="c26">col-resize</a>
    
    <a href="#" id="c27">row-resize</a>
    
    <a href="#" id="c28">no-drop</a>
    
    <a href="#" id="c29">not-allowed</a>
    
    <a href="#" id="c30">vertical-text</a>
    
    <a href="#" id="c31">x/y</a>
        
    <a href="#" id="c32">progress</a>
    <a href="#" id="c33">-moz-spinning</a>
        
    <a href="#" id="c34">grab</a>
    <a href="#" id="c35">-moz-grab</a>
        
    <a href="#" id="c36">grabbing</a>
    <a href="#" id="c37">-moz-grabbing</a>
        
    <a href="#" id="c38">cell</a>
    <a href="#" id="c39">-moz-cell</a>
    
    <a href="#" id="c40">copy</a>
    <a href="#" id="c41">-moz-copy</a>
    
    <a href="#" id="c42">-moz-zoom-in</a>
    
    <a href="#" id="c43">-moz-zoom-out</a>
    
    <a href="#" id="c44">-moz-count-up</a>
    
    <a href="#" id="c45">-moz-count-down</a>
    
    <a href="#" id="c46">-moz-count-up-down</a>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "cursor: Mauszeiger" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "cursor: Mauszeiger" hier bearbeiten.

Mitarbeiter
  • meggs
    hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Moritz Kern
    graphic, motion & web design - kernreaktor - staportal - mukitu

Kommentare: cursor: Mauszeiger