CSS3 - Kursor miša

Promjena izgleda kursora miša

Pretraživači obično prikazuju kursor miša preko bilo kog praznog dijela web stranice, ruku u rukavici preko bilo kog linka ili stavke na koju je moguće kliknuti i kursor za uređivanje bilo kog teksta ili tekstualnog polja. Pomoću CSS-a možete redefinisati ta svojstva kako bi prikazali niz različitih kursora. 

h1 {
    cursor: move;
}
p {
    cursor: text;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS cursor svojstva</title>
<style>
    a {
        cursor: url("img/custom.gif"), url("img/custom.cur"), default;
    }
    .cursor-demo span{
        min-width: 100px;
        padding: 5px 10px;
        margin-bottom: 5px;
        display: inline-block;
        border: 1px solid grey;
        border-radius: 3px;   
    }
</style>
</head>
<body>
    <h1>Prilagođeni kursor</h1>
    <p>Postavite kursor miša <a href="#"> preko mene </a> da biste otkrili prilagođeni kursor.</p>
    <hr>
    <h2>Još kursora</h2>
    <p>Postavite pokazivač miša preko okvira da biste otkrili kursor.</p>
    <div class="cursor-demo">
        <span style="cursor: auto;">auto</span>
        <span style="cursor: default;">default</span>
        <span style="cursor: none;">none</span>
        <span style="cursor: context-menu;">context-menu</span>
        <span style="cursor: help;">help</span>
        <span style="cursor: pointer;">pointer</span>
        <span style="cursor: progress;">progress</span>
        <span style="cursor: wait;">wait</span>
        <span style="cursor: cell;">cell</span>
        <span style="cursor: crosshair;">crosshair</span>
        <span style="cursor: text;">text</span> 
        <span style="cursor: vertical-text;">vertical-text</span>
        <span style="cursor: alias;">alias</span>
        <span style="cursor: copy;">copy</span>
        <span style="cursor: move;">move</span>
        <span style="cursor: no-drop;">no-drop</span>
        <span style="cursor: not-allowed;">not-allowed</span>
        <span style="cursor: grab;">grab</span>
        <span style="cursor: grabbing;">grabbing</span>
        <span style="cursor:e-resize">e-resize</span>
        <span style="cursor: n-resize;">n-resize</span>
        <span style="cursor: ne-resize;">ne-resize</span>
        <span style="cursor: nw-resize;">nw-resize</span>
        <span style="cursor: s-resize;">s-resize</span>
        <span style="cursor: se-resize;">se-resize</span>
        <span style="cursor: sw-resize;">sw-resize</span>
        <span style="cursor: w-resize;">w-resize</span>
        <span style="cursor: ew-resize;">ew-resize</span>
        <span style="cursor: ns-resize;">ns-resize</span>
        <span style="cursor: nesw-resize;">nesw-resize</span>
        <span style="cursor: nwse-resize;">nwse-resize</span>
        <span style="cursor: col-resize;">col-resize</span>
        <span style="cursor: row-resize;">row-resize</span>
        <span style="cursor: all-scroll;">all-scroll</span>
        <span style="cursor: zoom-in;">zoom-in</span>
        <span style="cursor: zoom-out;">zoom-out</span>
    </div>
</body>
</html>

Tabela u nastavku prikazuje različite pokazivače (kursore) koje će većina pretraživača prihvatiti. Postavite pokazivač miša preko veze "TEST" u izlaznoj koloni da biste otkrili taj kursor.

Izgled Vrijednost Primjer Prikaz
default a:hover{cursor:default;} TEST
pointer a:hover{cursor:pointer;} TEST
text a:hover{cursor:text;} TEST
wait a:hover{cursor:wait;} TEST
help a:hover{cursor:help;} TEST
progress a:hover{cursor:progress;} TEST
crosshair a:hover{cursor:crosshair;} TEST
move a:hover{cursor:move;} TEST

Stvaranje prilagođenog kursora

Takođe je moguće imati potpuno prilagođeni kursor. Svojstvo kursora obrađuje popis odvoje zarezom korisnički definisanu vrijednost kursora koja je praćena generisanim kursorom. Ako je prvi kursor netačno naveden ili ga nije moguće pronaći, koristiće se sljedeći kursor na listi odvojenoj zarezom i tako dalje dok se ne pronađe upotrebljiv kursor. Ako niti jedan od korisnički definisanih kursora nije važeći ili ga pretraživač ne podržava, umjesto njega upotrijebiće se generisani kursor na kraju popisa.

a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS prilagođenog krsora</title>
<style>       
    a {
        cursor: url("img/custom.gif"), url("img/custom.cur"), default;
    }
</style>
</head>
<body>
  <p>Postavite pokazivač miša <a href="#"> preko mene </a> da biste otkrili prilagođeni kursor.</p>
</body>
</html>

U gornjem primjeru custom.gif i custom.cur je datoteka prilagođenog kursora, prenesena na vaš poslužiteljski prostor, a zadani je generisani kursor koji će se koristiti ako prilagođeni kursor nedostaje ili ga pretraživač ne podržava.

Zadržite pokazivač miša preko ove veze da biste otkrili prilagođeni kursor