jquery - jQuery: changing background color without making permanent (currently it disabled my css :hover)

Question

I currently have a set of divs (buttons) that all hover various colors using css. When one of this divs is pressed, I used jQuery to make the color permanent and reverted the color of all other divs back to default.

However, it seems that once this is done, the :hover color doesn't work anymore. Am I approaching the jQuery wrong? How can I fix this. Here is an example:

EDIT

I am posting a jsfiddle to better explain. You will see that when you first scan your mouse across the divs, they hover different colors. And if you click either div 1 or div 2 (the others won't work, didn't bother doing the jQuery code for the fiddle for all of them), the div keeps it's color and any other one reverts to original. HOWEVER, this then disables the :hover pseudo class I have in my CSS. I need help fixing this.

http://jsfiddle.net/P3Ckk/143/

What is the best solution to this?

Answer 1

Working Demo: http://jsfiddle.net/P3Ckk/145/

I would rather do this way:

HTML

<div id='mainIconTile1' class="mainIconTile">
</div>

<div id='mainIconTile2' class="mainIconTile">
</div>

<div id='mainIconTile3' class="mainIconTile">
</div>

<div id='mainIconTile4' class="mainIconTile">
</div>

<div id='mainIconTile5' class="mainIconTile">
</div>

<div id='mainIconTile6' class="mainIconTile">
</div>

<div id='mainContentTile1'>
    1
</div>

<div id='mainContentTile2'>
    2
</div>

<div id='mainContentTile3'>
    3
</div>

<div id='mainContentTile4'>
    4
</div>

<div id='mainContentTile5'>
    5
</div>

<div id='mainContentTile6'>
    6
</div>

​<strong>CSS

.mainIconTile {
    background:#888888;                
    width:20px;
    height:20px;
    margin:1px;
    float:left;
}

#mainIconTile1:hover, #mainIconTile1.active {
    background:#5aa02c;
}

#mainIconTile2:hover, #mainIconTile2.active {
    background:red;
}


#mainIconTile3:hover, #mainIconTile3.active {
    background:blue;
}


#mainIconTile4:hover, #mainIconTile4.active {
    background:green;
}

#mainIconTile5:hover, #mainIconTile5.active {
    background:pink;
}

#mainIconTile6:hover, #mainIconTile5.active {
    background:brown;
}

#mainContentTile1 {
    background:orange;
    height:50px;
    width:50px;
    float:left;
    clear:left;
    display:none;
}

#mainContentTile2 {
    background:#e8e8e8;
    height:50px;
    width:50px;
    float:left;
    clear:left;

}

#mainContentTile3 {
    background:#e8e8e8;
    height:50px;
    width:50px;
    float:left;
    clear:left;
    display:none;
}

#mainContentTile4 {
    background:#e8e8e8;
    height:50px;
    width:50px;
    float:left;
    clear:left;
    display:none;
}

#mainContentTile5 {
    background:#e8e8e8;
    height:50px;
    width:50px;
    float:left;
    clear:left;
    display:none;
}

#mainContentTile6 {
    background:#e8e8e8;
    height:50px;
    width:50px;
    float:left;
    clear:left;
    display:none;
}

​</p>

JavaScript

$(document).ready(function(){
    $('div[id*="mainIconTile"]').click(function() {
        var theId = $(this).attr("id");
        $(".mainIconTile").removeClass('active');
        $("#" + theId).addClass('active');
        $('.mainContentTile:visible').hide(0, function(){
            $('#mainContentTile' + theId.substring(12)).show();
        });
    });
});

Working Demo: http://jsfiddle.net/P3Ckk/145/

Answer 2

I have no idea why this is happening (pretty weird), but when I used:

$("div#mainIconTile1").hover(function () {
   $(this).css("background", "#5aa02c");
}, function () {
   $(this).css("background", "#888");
});

it worked! So you may want to rely on jQuery hover in this case if CSS doesn't work. Of course there is also the solution of adding/removing css classes.