←  Tutoriale

AMXX.pl: Support AMX Mod X i SourceMod

»

CSS
Tworzenie Hover'u

  • +
  • -
Domiss's Photo Domiss 14.03.2012

Autor: DomissDEV for http://support-web.pl/
Witam w tym poradniku pokażę wam jak zastosować hover.
Co to jest hover ?
Hover jest to efekt tekstu / obrazka po najechaniu na dany element myszką.

Potrzebne pliki:
index.html
style.css

Więc tak może pierw zaczniemy od dodania kodu html więc zaczynamy.
Dodajemy w index.html
<a href="link">Strona Glowna</a>
To co widzicie wyżej jest to zastosowanie linku czyli naszego odnośnika, który będzie nas przekierowywał na podany adres. Adres strony wpisujemy w
href="link"
oczywiście nasz adres zamieniamy na słowo link.

Teraz trzeba zdefiniować to w css. Więc otwieramy nasz arkusz styli ( style.css ) i definiujemy nasz odnośnik.
a {
color: #fff;
font-size: 11px;
font-family: Arial;
}
U góry zdefiniowaliśmy odnośnik uwzględniając w nim:
• Kolor Czcionki: Biały,
• Rozmiar Czcionki: 11px,
• Rodzaj Czcionki: Arial,
Teraz czas na dodanie naszego hover'u, więc w arkuszu ze stylami ( style.css ), kopiujemy nasz wcześniejszy kod css i zamieniamy nasze a na a:hover powinno to wyglądać tak:
a:hover {
color: #000;
font-size: 11px;
font-family: Arial;
}
Teraz po dodania hover'u po najechaniu na tekst, kolor naszego linka zmieni na się Czarny.

Wygląd całego kodu:
index.html
<a href="link">Strona Glowna</a>
style.css
a {
color: #fff;
font-size: 11px;
font-family: Arial;
}
a:hover {
color: #000;
font-size: 11px;
font-family: Arial;
}

Poradnik napisany dla Support-Web.pl © by DomissDEV
Zakaz kopiowania na inne fora / blogi bez zgody autora.
Quote