Podświetlana "szachownica" CSS/HTML

Question

Witam, krótko i na temat:

 

Posiadam ZDJECIE szachownicy na stronie 

(Takie jak poniżej) 

mam zrobione na niej kordy ktore pokazują pozycje po najechaniu kursorem (1,1 1,2 itd) ale mniejsza o to.

 

Chciał bym aby każda osobna kratka się podświetlała albo zmienialakolor po najechaniu kursorem

Przypominam że jest to jedno zdjęcie więc nie dam po prostu :hover na img bo etedy cała szachownica sie podświetla a chciał bym zeby pojedyncza kratka się świeciła

Wie ktoś jak to zrobic?

Pozdrawiam.

Comments

A nie prościej utworzyć szachownicę z np. divów i potem je oscylować. Mniej kodu, lżejsze i nie będzie problemu z efektem hover :)

---

Też mam takie zdanie na ten temat, ale niestety musze mieć to w takiej a nie innej formie

Answer 1

Daj zdjęcie jako tło diva (o wymiarach zdjęcia). Na tego diva nałóż siatkę divów o wymiarach pasujących do wymiarów pól szachownicy. Już masz efekt hover na każdym divie (przypisz im klasę). Podświetlenie załatwi kolor tła każdego z małych divów i atrybut opacity.