[JavaScript] Zmiana obrazka po najechaniu Opcje

[Czikusek]

Mam sobie 3 obrazki, które po kliknięciu w nie wyświetlają odpowiednią do nich treść (krótką). Napisałem w JS na atrybucie data-id wyświetlanie odpowiedniej treści do klikniętego obrazka. Działa fajnie. Teraz chciałbym jeszcze zrobić taki myk, że obrazek, który jest aktualnie kliknięty jest podświetlany. Mam takie coś:

[HTML] pobierz, plaintext 
<div class="obrazek" data-id="1"><img src="src" /></div>
<div class="obrazek" data-id="2"><img src="src" /></div>
[HTML] pobierz, plaintext 

... a w jQuery sobie napisałem:

[HTML] pobierz, plaintext 
$("obrazek img").click(... attr("src", "obrazek_podswietlony");
[HTML] pobierz, plaintext 

... no i ogólnie jest ok, obrazek zmienia się na podświetlony. Tyle tylko, że ten, który został podświetlony zostaje dalej podświetlony i podświetla się następny. A jak po kliknięciu w inny obrazek ten stary odświetlić?

Zrobiłem tak, że po .click() w obrazek, zmienia się zmienna "wcisniete = numer_obrazka".

Dalej zrobiłem tak:

if (wcisniete != 1) { tutaj zdarzenie .hover() { attr("src", "obrazek_podswietlony"); }

.. no ale dalej nie działa

[trueblue]

Najpierw wszystkim odznaczasz, a potem wybranemu zaznaczasz.
Domyślna wartość src dla atrybutu src, to nie jest dobry pomysł.

[Czikusek]

No dobra, a jak zrobić że po najechaniu zmienia się na podświetlony? Funkcja hover() działa, ale to mi psuje efekt podświetlenia po kliknięciu, bo kliknę w obrazek - podświetli, ale od razu usuwa podświetlenie bo działa tu funkcja onmouseout. Co robić?

[trueblue]

Do hover używaj wyłącznie CSS, a nie jQuery, do obsługi click klasy (dodając lub usuwając klasę z elementu).

[HTML] pobierz, plaintext 
element:hover,
element.clicked{
  //tu jakiś styl dotyczący podświetlenia
}
[HTML] pobierz, plaintext 

[Czikusek]

No ale to musiałbym obrazki wrzucić w formie <div class="obrazek1"></div> zamiast <img src="obrazek1" /> tak?

[trueblue]

A co ma do tego <div>, skoro podpinasz click do obrazka?