1

クリックするとサブメニューが開くリンクがいくつかあります。これは、私のスタイルシートの、、、および宣言によって実現さ:hoverれ:focusます:active。

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

問題は、CSSの実装は機能しますが、JavaScriptで修正したいさまざまな欠点があるということです。私はJavaScriptライブラリとしてYUI3.5.0を使用しています。JavaScriptを使用して、スタイルシートの:hover、:focusおよび:active宣言を無視することは可能ですか？

これらの宣言を別のクラスに入れて、JavaScriptを使用して要素のクラスを変更できることは承知していますが、私にはあまりわかりません。

4

2 に答える 2

1

クラスを変更するソリューションが最もクリーンだと思いますが、たとえば、JavaScriptでホバーをオーバーライドできるのは次のとおりです。

jQueryの場合：

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

この例を参照してください。

jQueryなし：

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

この例も参照してください。

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');
});

この例も参照してください。

于 2012-04-30T06:53:56.157 に答える
1

これらの宣言を別のクラスに入れ、要素のクラスを JavaScript で変更できることは承知していますが、あまりきれいには思えません。

それはそれが得るのと同じくらいきれいです。あまり衛生的でない解決策は、一般的なルールからスタイルを複製し、要素に直接注入することです。

于 2012-04-30T06:37:04.487 に答える