Autor publikacji
Virtual Patriot - Administrator

Wygląd elementów "a" po użyciu pseudoklasy :hover

Data publikacji
Ostatnio edytowano

W tej części kursu CSS wykonamy czynności, które pozwolą nam ukończyć pierwszą wersję menu, która będzie w stu procentach interpretowana przez wszystkie wersje najpopularniejszych przeglądarek internetowych. W następnej części kursu CSS zajmiemy się dodaniem właściwości CSS3 do naszego pionowego menu CSS, dzięki czemu urozmaicimy jego wygląd.

Ostatnią czynnością jaka pozostała nam do wykonania, aby ukończyć pierwszą wersję pionowego menu CSS, jest ustalenie w jaki sposób ma zmienić się wygląd elementu a, w momencie gdy najedziemy na niego kursorem myszki.

Do tej pory nasza reguła CSS, która zawierała pseudoklasę :hover pozostawała bez właściwości CSS. Dodamy do niej właściwość color:#000; dzięki czemu po najechaniu kursorem myszki na element a, jego kolor tekstu zmieni się na czarny. 

ul li a:hover {
  color:#000;
}

Selektor ul li a:hover, będzie odnosił się do każdego elementu a, który będzie znajdował się w elemencie li znajdującym się w elemencie ul. Właściwość color:#000; zostanie dodana do takiego elementu a, w momencie gdy kursor naszej myszy znajdzie się nad wspomnianym elementem a. W momencie gdy nasz kursor myszy nie będzie znajdował się nad danym elementem a, to właściwość color:#000; zostanie usunięta ze wspomnianego elementu.

Spróbuj teraz najechać kursorem myszki na element a w naszym pionowym menu CSS.

Następną właściwością CSS jaką dodamy do naszej reguły CSS będzie właściwość background-image wraz z wartością none, dzięki której tło obrazkowe elementu zostanie usunięte, w momencie gdy najedziemy kursorem myszki na element a. 

ul li a:hover {
  color:#000;
  background-image:none;
}

Spróbuj teraz najechać kursorem myszki na element a w naszym pionowym menu CSS.

Ostatnią właściwością CSS jaką dodamy do naszej reguły CSS będzie właściwość, dzięki której kolor tła elementu a zostanie zmieniony na biały, w momencie gdy najedziemy kursorem myszy na wspomniany element HTML.

Dodajemy właściwość background-color:#FFF; do naszej reguły CSS: 

ul li a:hover {
  color:#000;
  background-color:#FFF;
  background-image:none;
}

Spróbuj teraz najechać kursorem myszki na element a w naszym pionowym menu CSS.

Pełny kod HTML z tej części kursu CSS został przedstawiony poniżej: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
      }

      /* wygląd elementów - li */
      ul li {
        border-top:1px solid #CCC;
      }

      /* wygląd pierwszego elementu - li */
      ul li:first-child {
        border-top:none;
      }

      /* wygląd elementów - a */
      ul li a {
        display:block;
        text-decoration:none;
        background-color:#EEE;
        padding:10px;
        text-align:center;
        color:#00A0AA;
        font-size:18px;
        border:1px solid #FFF;
        background-image:url('obrazek.png');
        background-repeat:repeat-x;
      }

      /* wygląd elementu - a - w momencie najechania na niego kursorem myszki */
      ul li a:hover {
        color:#000;
        background-color:#FFF;
        background-image:none;
      }
    </style>
  </head>

  <body>

    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
    </ul>

  </body>
</html>

Tym sposobem udało się nam utworzyć pionowe menu CSS, które będzie w pełni interpretowane przez przeglądarki: Firefox, Safari, Opera, Google Chrome oraz Internet Explorer. Jednak to nie koniec możliwości jakie oferuje nam język CSS.

W następnej części kursu CSS zajmiemy się dodaniem właściwości CSS3 do naszego pionowego menu CSS.