0

JavaScript でいくつかの div をクリック可能にしています。CSS を使用して、マウスが div に入ったときに div 内のリンクの色を変更するなど、クリック可能であることをユーザーに理解させたいと思います。

CSS では次のようになります。

#menu > div:hover > a {
    color: #f00;
}

そしてそれは魅力のように機能します。

JavaScrptが有効になっている場合にのみ、マウスオーバーしたときにリンクの色を変更したいと思います。無効になっている場合、divはクリックできず、リンクだけです。この宣言を javascript で追加したいと思います。mootools では次のように単純にする必要があります。

$$('#menu > div:hover > a').setStyle('color', '#f00');

しかし、そのセレクターは mootools では機能しません。私はeachdiv の子と#menuそれに行く必要がありaddEventsます。単純な css 定義と比較すると、私には多すぎるように思えます。どうやってやるの？

別の解決策（実装方法がわからない）は、with_js_enabled.cssJavaScriptを介してロードするように書くことができます。出来ますか？

4

2 に答える 2

3

はるかに簡単: ページの読み込み時に body 要素にクラスを設定します。

document.body.className = "js";

次に、CSS を変更します。

.js #menu > div:hover > a {
    color: #f00;
}

仕事は終わりました:-)

(IE 6 は :hover on links 以外をサポートしていないことをご存知だと思いますが?)

于 2009-08-04T10:44:02.050 に答える
1

ここで mootools について質問したので...

マウスオーバーが div でトリガーされたときに #menu の div 内のすべての A の色を変更するには、クラス a.red { color: red; を定義できます。}

$("menu").getElements("div").each(function(el) {
    el.addEvents({
        mouseenter: function() {
            this.getElements("a").addClass("red");
        },
        mouseleave: function() {
            this.getElements("a").removeClass("red");
        }
    });
});

$("menu").getElements("div").getElements("a") または $("menu").getElements("a") に移動して、イベントを親にアタッチすることもできます (たまたまdivです）-それは本当に問題ではないと思います。

于 2009-08-05T13:21:42.940 に答える