切换类在 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 代码上引发错误，从而阻止点击处理程序被注册。点击事件代码本身可以正常工作。