javascript - 切换类在 jquery 中悬停时不起作用

Question

我需要什么

• 我需要在点击后使用 toggleclass 切换图像。

  CSS代码

   .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代码:

 $(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);
});  
     });

我尝试过的

• 我已经尝试在 css 中删除悬停，然后切换类工作正常。 jsfiddle:http://jsfiddle.net/xxuhL555/

• 这是当我没有在 css 中移除悬停时的 jsfiddle:http://jsfiddle.net/o61rqj95/

• 我如何通过 css 或 jquery 处理这个问题。

• 这是toggleclass还是css的问题。

调试

• 点击图片更改。

• 然后重新点击红色星号(图片不会改变)。

• 在移除悬停时它起作用了，这不是我的要求。

输出

• 它应该类似于在不从图像中移除悬停的情况下切换图像。

Answer 1

在 Chrome 中，Fiddles 在 localStorage 代码上抛出错误，阻止注册点击处理程序。点击事件代码本身工作正常。