• 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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
314 wizyt
pytanie zadane 8 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,350 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,350 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,350 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,350 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 3,318 wizyt
0 głosów
1 odpowiedź 225 wizyt
0 głosów
3 odpowiedzi 1,449 wizyt

93,194 zapytań

142,206 odpowiedzi

322,051 komentarzy

62,519 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3053p. - dia-Chann
  2. 2998p. - Łukasz Piwowar
  3. 2993p. - Łukasz Eckert
  4. 2970p. - CC PL
  5. 2930p. - Tomasz Bielak
  6. 2907p. - Łukasz Siedlecki
  7. 2890p. - rucin93
  8. 2801p. - Adrian Wieprzkowicz
  9. 2645p. - Mikbac
  10. 2485p. - Marcin Putra
  11. 2461p. - Michał Telesz
  12. 2418p. - Michal Drewniak
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...