Tworzenie Hover'u
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
Teraz trzeba zdefiniować to w css. Więc otwieramy nasz arkusz styli ( style.css ) i definiujemy nasz odnośnik.
• 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:
Wygląd całego kodu:
index.html
Poradnik napisany dla Support-Web.pl © by DomissDEV
Zakaz kopiowania na inne fora / blogi bez zgody autora.
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.