Zmiana koloru tła div'a po najechaniu na innego div'a myszką.

pytanie zadane 31 października 2015 w HTML i CSS przez Filip31411 Dyskutant (8,820 p.)

Witam. W ostatnim czasie wpadłem na pomysł żeby zrobić grę w statki w html. Zrobiłem już planszę z div'ów, ale chcę dodać taki efekt żeby po najechaniu na pole zmieniało się tło litery i cyfry określającej położenie tego pola.

Czyli jeśli najadę myszką na np. C8 to żeby tło litery C i tło cyfry 8 zmieniło kolor.

Tz.

Czy da się zmienić tło div'a po najechaniu na innego div'a, a jak tak to jak?

3 odpowiedzi

odpowiedź 31 października 2015 przez furas Maniak (53,800 p.)
wybrane 31 października 2015 przez Filip31411

Najlepsza

Czy dobrze rozumie, że C oraz 8 są na krawędzi planszy a C8 wewnątrz planszy ?

Przypuszczam, że zbudowanie planszy tak aby div z C8 znajdował się w div z C a ten w div z 8 nie jest możliwe - wtedy bowiem dało to się zrobić zwykłym :hover - bo najeżdzając na div z C8 jednocześnie najeżdzało by się na div z C i div z 8.

Tak więc zostaje chyba użyć JavaScript :)

komentarz 31 października 2015 przez Filip31411 Dyskutant (8,820 p.)

Tak dobrze pan rozumie, ale jak miał by wyglądać kod js do czegoś takiego.

komentarz 31 października 2015 przez furas Maniak (53,800 p.)

W JS masz takie funkcje jak `document.getElementById(id_elementu)` i możesz mieć dostęp do elementu, któremu w HTML przypisałeś w `id`. Potem takiemu elementowi można zmieniać `style` np kolor tła `backgroundColor`

element = document.getElementById("id_elementu");
element.style.backgroundColor = 'red';

W HTML można za pomocą `onmouseover=` przypisać wywołanie funkcji po najechaniu myszą.

---

W przeglądarce są wbudowane konsole na których można wykonywać funkcje JS na elementach otwartej strony - można więc testować funkcje. W niektórych przeglądarkach podczas wpisywania funkcji nawet podpowiada jakie są funkcje i właściwości zaczynające się na już wprowadzony tekst.

komentarz 31 października 2015 przez Filip31411 Dyskutant (8,820 p.)

Dziękuję bardzo :)

odpowiedź 31 października 2015 przez xR Mądrala (6,260 p.)

Jeżeli dobrze Cię zrozumiałem to wystarczy dodać właściwość :hover dla wybranych elementów

Ps Gdy podajesz kod też trochę łatwiej nam zrozumieć o co Ci chodzi :)

komentarz 31 października 2015 przez SebastianGomularz Dyskutant (9,370 p.)

jemu chodzi ze po najechaniu na np div A to kolor zmieni div B.

komentarz 1 listopada 2015 przez xR Mądrala (6,260 p.)

dobra, źle zrozumiałem, już miałem zamiar udzielać informacji, ale kolega wyżej mnie uprzedził :P

odpowiedź 4 listopada 2015 przez Manickus Obywatel (1,030 p.)

Proponuję użyć jQuery, najpierw użyj funkcji hover dla Twoich divów. Dalej pobierz przez funkcję attr id obiektu(pamiętaj aby mądrze je zbudować) , i na podstawie pobranego id podswietlaj poprzez użycie funkcji css.(tzn zmień tło, kolor danej literki oraz cyferki).

komentarz 7 listopada 2015 przez Spikus Nowicjusz (170 p.)

To mój pierwszy post więc witam wszystkich ;).

Zastanawiam się czy da się to rozwiązać w taki sposób, że każda kolumna ma inną nazwę klasy a każdy wiersz inną nazwę diva, w punkcie przecięcia ;hover działałby dla kolumny i wiersza podswietlając jak na obrazku lub z :firstchild tylko A1.

Nie sprawdzałem czy ma to szansę działać.