CSS：hover、：active、：CSSでフォーカス宣言を無視する

Question

リンクをクリックすると、サブメニューが開きます。これは、私のスタイルシートで:hover,:focus、および:activeの宣言によって達成されます。

この効果は、http://www.cssplay.co.uk/menus/cssplay-click-flyout.htmlと同じです。

CSS実装では、さまざまな欠点がありますが、JavaScriptで修正したい点があります。私はYUI 3.5.0を私のjavascriptライブラリとして使用しています。 JavaScriptを使用して、スタイルシート内の:hover,:focus、:active宣言を無視することはできますか？

私はこれらの宣言を別のクラスに入れて、JavaScriptで要素のクラスを変更することができますが、それは私にとっては非常にきれいではないようです。

Answer 1

私は、これらの宣言を別のクラスに入れて、JavaScriptで要素のクラスを変更することができますが、それは私にとってはとても清潔ではないと認識しています。

これはきれいです。はるかに少ない衛生的な解決策は、あなたのジェネリックルールからスタイルを複製し、それらをあなたの要素に直接注入することです。

Answer 2

私は変更クラスとソリューションはクリーンであるが、唯一たとえばあなたはJavaScriptを使用して、ホバーオーバーライドすることができると思います：jQueryを使って

を：

$('#js').hover(
    function() { $(this).css('color', 'blue'); }, 
    function() { $(this).css('color', 'black'); } 
); 

はthis exampleを参照してください。 jQueryのなし

：

document.getElementById('js').onmouseenter = function() { 
    this.style.color = 'blue'; 
} 
document.getElementById('js').onmouseleave = function() { 
    this.style.color = 'black'; 
} 

またthis exampleを参照してください。 YUIと

：

Y.one('#js').on('mouseenter', function(e) { 
    e.currentTarget.setStyle('color', '#00f'); 
}); 
Y.one('#js').on('mouseleave', function(e) { 
    e.currentTarget.setStyle('color', '#000'); 
}); 

またthis exampleを参照してください。