Brak odpowiedzi do tego tematu

[Domiss]

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.