cursor - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti cursor nastavujeme jaký kurzor myši se má zobrazit nad HTML elementem. Můžeme si vybrat mezi základními kurzory nebo použít svůj vlastní. Vlastnost se dědí.

Hodnoty

obrázek - Vlastní obrázek kurzoru, URL zadáváme pomocí funkce url(), stejně jako všude jinde. Můžeme uvést více hodnot oddělených čárkou. Doporučuje se na konec uvést ještě jednu z hodnot níže, pokud by nebyl obrázek nalezen nebo prohlížeč tuto vlastnost nepodporoval.
auto (výchozí) - Výchozí kurzor prohlížeče.
crosshair - Zaměřovač.
default - Výchozí kurzor v systému (většinou šipka).
e-resize - Vodorovné roztažení (doprava).
help - Šipka s otazníkem.
move - Kurzor přesouvání (čtyři šipky).
n-resize - Svislé roztažení (nahoru).
ne-resize - Diagonální roztažení (/).
nw-resize - Diagonální roztažení (\).
pointer - Ruka s ukazováčkem.
progress - Šipka s ukazatelem pracování (přesýpací hodiny nebo rotující kolečko).
s-resize - Svislé roztažení (dolů).
se-resize - Diagonální roztažení (\).
sw-resize - Diagonální roztažení (/).
text - Kurzor k označení textu.
w-resize - Vodorovné roztažení (doleva).
wait - Ukazatel pracování (přesýpací hodiny nebo rotující kolečko).
inherit - Vlastnost cursor bude zděděna od rodičovského elementu.

Ukázka

<!DOCTYPE html>
<html>
    <head>
        <style>
        #kontejner
        {
            cursor: pointer;
            background-color: #59A4FF;
            border: 1px solid blue;
            width: 300px;
            height: 100px;
        }
        </style>
    </head>
    <body>
        <div id="kontejner">Tento kontejner má kurzor ruky.</div>
    </body>
</html>

Výsledek:

Ukázka nastylování kurzoru elementu v CSS - Ostatní CSS vlastnosti

Článek pro vás napsal David Hartinger

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity