• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Po najechaniu kursorem na obrazek, hover jest nieaktywny

VPS Starter Arubacloud
0 głosów
248 wizyt
pytanie zadane 8 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 9 stycznia 2017 przez Krzysiek_34
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.
komentarz zamknięcia: Problem został rozwiązany.

2 odpowiedzi

+1 głos
odpowiedź 8 stycznia 2017 przez Marcin2000Xpl Gaduła (3,250 p.)

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;
}

 

komentarz 8 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)

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

komentarz 8 stycznia 2017 przez Marcin2000Xpl Gaduła (3,250 p.)
Przetestowałem na JSFiddle w twoim projekcie.
komentarz 8 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)

OK, dzięki za pomoc.wink

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ć?

komentarz 8 stycznia 2017 przez Marcin2000Xpl Gaduła (3,250 p.)
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".
komentarz 8 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)
edycja 9 stycznia 2017 przez Krzysiek_34
Zrobiłem te odstępy pomiędzy napisami.
+1 głos
odpowiedź 8 stycznia 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)
Ustawiłeś pseudoklasę hover na a: a obrazek (img masz zupełnie osobno) https://jsfiddle.net/eq2k3udj/8/

Podobne pytania

0 głosów
3 odpowiedzi 2,780 wizyt
0 głosów
1 odpowiedź 183 wizyt
0 głosów
3 odpowiedzi 1,137 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...