jquery change css via id selector

Question

ı want to change a specific style of div by its id. However, it seems it is not working at all. The necessary codes are below:

Jquery:

$(document).ready(function () {

$(".a_10.08.201223:56:49").hover(function(){
        $("#10.08.201223:56:49").removeClass('arrow-up').addClass('arrow-up2');

    }).mouseout(function(){
        $("#10.08.201223:56:49").removeClass('arrow-up2').addClass('arrow-up2');        
    });
});

HTML:

    <div class = "a_10.08.201223:56:49">

    Something in here

        <div class="arrow-up" id="10.08.201223:56:49"></div>
</div>

The idea is that this ids are the date of the comments. For instance, 10.08.201223:56:49 id a date for a specific comment and a_10.08.201223:56:49 class represents the area to be triggered. When it is hovered through the upper div, the child div(arrow) will be displayed. When mouse is out of the upper div, the arrow will be disappered. It seems that i could not do it so far. Thanks

Answer 1

You have to escape special character used in jquery selector eg : , . etc.

Live Demo

$(document).ready(function () {

$(".a_10\\.08\\.201223\\:56\\:49").hover(function(){

        $("#10\\.08\\.201223\\:56\\:49").removeClass('arrow-up').addClass('arrow-up2');

    }).mouseout(function(){
        $("#10\\.08\\.201223\\:56\\:49").removeClass('arrow-up2').addClass('arrow-up2');        
    });
});​