Po najechaniu kursorem na obrazek, hover jest nieaktywny

Question

Witam.

Po najechaniu kursorem na obrazek, hover jest nieaktywny. Chciałbym, aby po najechaniu kursorem na dany obrazek uruchamiał się hover, a uruchamia się po za obszarem obrazka. Zamiast obrazków są kwadraty na jsfiddle, bo ścieżkę do obrazków podałem z dysku, ale daje to ten sam efekt.

Tak to wygląda:

https://jsfiddle.net/Krzysiek_35/eq2k3udj/1/

Wiecie co należy poprawić w kodzie, aby po najechaniu na obrazek uruchamiał się hover?

Będę bardzo wdzięczny.

Answer 1

Obrazek musisz umieścić w tagu <li> i ustawić taki styl w CSS:

nav ul li:hover a {
  background-color: #F36742;
  color: black;
  cursor: pointer;
}

 

Comments

Przetestowałeś ten swój zapis czy strzelasz w ciemno?

---

Przetestowałem na JSFiddle w twoim projekcie.

---

OK, dzięki za pomoc.

A teraz trudniejsze zadanie w tym temacie.

Co muszę zmienić w kodzie, aby pomiędzy pierwszym napisem, a drugim był odstęp po uruchomieniu hover?

Zauważcie, że aktualnie te wszystkie napisy po uruchomieniu hover są połączone ze sobą. A chciałbym, aby te napisy były oddzielone.

Wiecie jak to zrobić?

---

Teraz ci nie pomogę za bardzo, bo jestem trochę zajęty, ale powiem ci tyle: musisz rozmieścić obrazki bez pomocy "position: absolute" lub z tą pomocą przy zastosowaniu na tagu <li> stylu "position: relative". Jeżeli chodzi o odstępy to stylizując tag <li> przykładowo stylem "margin-top: 5px".

---

Zrobiłem te odstępy pomiędzy napisami.

Answer 2

Ustawiłeś pseudoklasę hover na a: a obrazek (img masz zupełnie osobno) https://jsfiddle.net/eq2k3udj/8/