jQuery CSS disables the original hover-style

Question

I have a div called "msg_div" and in the styles.css I have a line like this:

.msg_div:hover { background-color: #eee; }

Now I added this script to a page:

$(".msg_div").css("background-color", "#FFF");
$(this).css("background-color", "#EEE");

But now there isn't any hover style anymore. How can I fix this?

My intention is that when I click a box, the grey background should switch to the clicked div.

Edit (this is the HTML code):

<script>
    $(".msg_posteingang_div").click(function(){
        $(".msg_div").css("background-color", "#FFF");
        $(this).css("background-color", "#EEE");
    })
</script>
<div class="msg_div">Message 1</div>
<div class="msg_div">Message 2</div>
<div class="msg_div">Message 3</div>
<div class="msg_div">Message 4</div>

Edit 2: The solution is to create a style (in styles.css) for the .msg_div class itself not just for the :hover .

My styles.css now:

.msg_div { padding:5px; cursor: pointer; }
.msg_div:hover { background-color: #eee; }

Answer 1

you are using msg-div in your css. and msg_div in your javascript. make sure your elements are named correctly.

Answer 2

Add !important to the hover background-color style:

.msg_div:hover { background-color: #eee!important; }

Here is working example:

http://jsfiddle.net/e9d5e67c/1/

Note this solution is the quickest one (but works:)), and you may want to read why this is happening and try a better solution described here: CSS hover selector for background-color not working after dynamic change of background-color with jquery