C# týden Slevový týden - Červenec
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se C#

cursor - Český CSS 3 manuál

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!