WebKitブラウザでjQueryを使って.focus（）する方法

Question

タイトルはかなり説明しています。これはWebKit特有の問題です（FireFoxには全く問題がないため、少なくとも私はこれを絞り込んでいます）。この問題は、Chrome 8.0.552.224とSafari 5.0.2でテストされました。私はそれがオーバー推移していると、それがフォーカスされていたときにときa.buttonするクラスを追加するjQueryの機能を作成している

<li class="buttonArea"> <span class="buttonHighlight"></span> 
    <a href="#" class="button">PRE-ORDER</a> 
    <a href="#" class="buttonTag">Got a Coupon Code?</a> 
    <span class="buttonBG"></span> 
    <!-- Rainbow background --> 
</li> 

：

は、私は、このHTMLの構造を有しています。方法は次のとおりです。

$(document).ready(function() { /* ///// start DOM ready ///// */ 
    /** Big button hover/active effects **/ 
    $('a.button').hover(function() { 
     $(this).toggleClass('button-hover'); 
    }); 
    $('.button').focus(function() { 
     $(this).toggleClass('button-active'); 
     Cufon.replace('.button-active'); 
    }); 
}); /* ///// end DOM ready ///// */ 

ボタンホバークラスが追加されました。ただし、ボタンアクティブではありません。 Cufon.replaceの行を削除しても動作しません。どうやら、このWebKit関連の問題（http://bugs.jquery.com/ticket/3332）を記述しているjQueryサイトのチケットはすでにありますが、あなたの天才の心が私を助けてくれることを願っています！この

$('.button').click(function() { 
    $(this).toggleClass('button-active'); 
    Cufon.replace('.button-active'); 
}); 

すなわちによって

$('.button').focus(function() { 
    $(this).toggleClass('button-active'); 
    Cufon.replace('.button-active'); 
}); 

クリックイベントでフォーカスイベントを交換し、それが（あまりにもクロームで）同様に動作しますクリックしても、満足しているため -

Answer 1

とにかく、私の良き友人の助けといくつかの調整のおかげで、私たちは解決策を見つけました。これはブラウザ間で互換性があり、他の人に役立つことを願っています。

$('.button').hover(function() { 
    $(this).addClass('button-hover'); 
    $(this).mousedown(function() { 
     $(this).addClass('button-active'); 
     Cufon.replace('.button-active'); 
     $(this).mouseup(function() { 
      $(this).removeClass('button-active'); 
      Cufon.replace('.button'); 
     }); 
    }); 
}, function() { 
    $(this).removeClass('button-hover'); 
}); 

Answer 2

はよく私はあなたのコードを置き換えることができると思いますあなたの要求に焦点を当ててあなたが望むこと。