[jQuery] Reaguje tylko jeden, pierwszy element o danym id..

Witam forumowiczów. Tworzę sobie mini galeryjkę. Zamierzam dobudować tam też.. A nie ważne. Ważne, że od 2 dni staram się zrobić tak, aby element po najechaniu na niego myszą zmieniał swoją klasę na inną, a po zjechaniu powrócił do poprzedniej klasy. Biłem się biłem i kod wygląda aktualnie tak:

$(document).ready(
    function(){
        $('#obrazekbg').hover(function () {
            $('#obrazekbg').removeClass('obg0');
            $('#obrazekbg').addClass('obg1');
        },
        function() {
            $('#obrazekbg').removeClass('obg1');
            $('#obrazekbg').addClass('obg0');
        });
});

A kod html, którego ten kod dotyczy to mniej więcej:

<div class="projekt">
                <div class="tytulgalerii">Łazienka</div>
                <div id="obrazekbg" class="obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div id="obrazekbg" class="obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div id="obrazekbg" class="obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div id="obrazekbg" class="obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div id="obrazekbg" class="obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
            </div>

Kod jQuery działa, ale reaguje tylko pierwszy div o id="obrazekbg", reszta to olewa ;D.

Proszę o pomoc :)

ID elementu moze byc unikalne w ramach jednego dokumentu (strony WWW). Tutaj masz wiele elementow, ktore maja nadane id obrazekbg. Wywal to. Kod powinien wygladac tak:

$(document).ready(
    function(){
        $('.gallery').hover(function () {
            $(this).removeClass('obg0');
            $(this).addClass('obg1');
        },
        function() {
            $(this).removeClass('obg1');
            $(this).addClass('obg0');
        });
});

Natomiast HTML:

<div class="projekt">
                <div class="tytulgalerii">Łazienka</div>
                <div class="gallery obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div class="gallery obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div class="gallery obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div class="gallery obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
                <div class="gallery obg0"><img src="images/gallery/0103ss.jpg" class="obrazek" alt="Zdjęcie"/></div>
            </div>

Do jednego elementu moze byc przypisanych wiele klas CSS.

P.S. Zainteresuj sie metoda toggleClass() w jQuery, moze Ci sie przyda.

Właśnie takie coś chciałem zrobić, ale nie wiedziałem w jaki sposób użyć dwóch klas. Dzięki wielkie, zaraz to pozmieniam :). Oczywiście, jak skończę, będę miał jeszcze do zrobienia animacje itp. Wtedy zacznę zamieniać to wszystko na lepsze rozwiązania :). Ważne, bym miał pierwszą działającą wersję :). Jeszcze raz dzięki.