Občas se nám na webu hodí, když chceme nechat po hoveru prolnout nějaký prvek. K tomu nám slouží šikovná vlastnost v CSS – transition. Transition má pouze jeden parametr a to číslo s eskem.
Příklad: transition: 0.8s značí, že se nám bude prolnutí u hoveru trvat 0,8 sekundy. Jen chci upozornit, že pokud v CSS značíme desetinné číslo, píšeme vždy tečku (místo čárky). Živá ukázka.
HTML:
<a href="http://mujskript.cz">MůjSkript.cz</a>
CSS:
a {
color: green;
text-decoration: underline;
font-weight: bold;
}
a:hover {
color: red;
text-decoration: none;
transition: 0.8s;
}
Pokud bychom chtěli i zpětný efekt, po odjetí myší z prvku, vložíme vlastnost transition i k samotnému prvku (bez hoveru). Zde tedy změníme pouze CSS. U zpětného transitionu můžeme mít jinou hodnotu (= jinou délku přechodu). Živá ukázka.
CSS:
a {
color: green;
text-decoration: underline;
font-weight: bold;
transition: 0.8s; /* Zde se nastavuje zpětný efekt po odjetí myší. Může mít jinou hodnotu */
}
a:hover {
color: red;
text-decoration: none;
transition: 0.8s;
}
Máte-li nějaké dotazy, piště do komentářů.