Toggle Class not working in hover in jquery

Question

what i need

• i need to toggle image when after click using toggleclass.

  css code

    .favourate{ display:block; background:url('/images/star1.png') no-repeat; width:24px; height:25px; float:right;} .favourate.faved, .favourate:active{ background:url('/images/star1_hover.png') no-repeat; transition:.2s ease all;} 

javascript code:

 $(document).ready(function(){
var eventData = {};
if (localStorage.getItem('eventData') !== null) {
    $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
        $('#'+id).addClass('faved');
    });
}
$('.favourate_dextop').click(function(e){
    e.preventDefault();
    if (eventData[this.id] !== undefined) {
        delete eventData[this.id];
    }else{
        eventData[this.id] = $(this).data();
    }
    $(this).toggleClass('faved');
    localStorage.setItem('eventData', JSON.stringify(eventData));
    console.log(eventData);
});  
     });

what i have tried

• i have tried remove hover in css & then toggle class work fine. jsfiddle: http://jsfiddle.net/xxuhL555/

• here is jsfiddle of when i not removed hover in css : http://jsfiddle.net/o61rqj95/

• how could i handle this issue through css or jquery.

• is this problem of toggleclass or css.

debug

• on click image changes.

• and re click on red star noting (images do"nt changes ).

• on removing hover it works that is not my requirement.

output

• it should be like toggling of images without removing hover from images.

Answer 1

In Chrome, the Fiddles throw an error on the localStorage code, preventing the click handler from being registered. The click event code by itself works fine.