Pokazanie obramowania w kolorze czerwonym po najechaniu kursorem na napis

Question

Witam.

Po najechaniu kursorem na napis "Sport" zmienia sie kolor tła, ale obramowanie pozostaje w kolorze czarnym jak pozostałe obramowania. Co muszę poprawić w CSS, aby po najechaniu na napis "Sport" pojawiło się obramowanie w kolorze czerwonym?

Tak to aktualnie wygląda:

https://jsfiddle.net/Krzysiek_35/w8ytgaLn/5/

Answer 1

Kwestia odpowiedniego wybrania selektorów..
 

.panel-1 .left-nav ul li:nth-child(2):hover {
  border: 3px solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Ale kod ogółem jest jakiś dziwny, jakby trochę przekombinowany.

Comments

Niestety nie jest tak jak powinno. Pojawiło się obramowanie w kolorze czerwonym dookoła całego tła po uruchomieniu hover. Chodzi mi o obramowanie dookoła obrazka, czyli ten mały kwadrat z lewej strony napisu. Mój błąd, że nie napisałem w temacie, że chodzi TYLKO o obramowanie obrazka, które aktualnie jest w kolorze czarnym.

---

Dodajesz do tego znacznik img?

.panel-1 .left-nav ul li:nth-child(2):hover img

To całkiem łatwe rzeczy i nawet początkujący nie powinen mieć z tym problemu. Może warto poczytać o dziedziczeniu i pseudoklasach?

---

OK, działa. Dzięki za pomoc.

Poczytam o pseudoklasach i zapoznam się bardziej szczegółowo w tym temacie.