jquery - セレクタJquery

Question

こんにちは、jquery と JavaScript を学んでいます。その中に div とスパンがたくさんあります。この div はすべて同じクラスを持ち、スパンもすべて同じクラスを持っています。マウスを div の上に置くと、そのdiv内のタグspanで文字の色を変更します。私のタラと私のjquery関数をどのように構築したかを教えてください。これを達成するためにセレクターを使用する方法を知りたいです。

これはjsFiddleです：

$(".wrap-faq").on("mouseover", hoverFaq);

    function hoverFaq(){
        $(".wrap-faq .faq .txt-preg-faq").css("color", "white")
        $(this).addClass("over");
    }

$(".wrap-faq").on("mouseleave", unHoverFaq);

    function unHoverFaq(){
        $(this).removeClass("over");
    }

http://jsfiddle.net/xtatanx/jz73b/

score 3 · Accepted Answer

シンプルな CSS ホバーが必要だと思います。

.faq {
    color: black;
}
.faq:hover {
    background: orange;
    color: white;
}

このhttp://jsfiddle.net/saYFz/はあなたが望むものですか?

score 0 · Accepted Answer

このコードは、カーソルを合わせると div に CSS クラスを追加します。

$(".wrap-faq").on("hover",
    function(){
        // on over, add class "over"
        $(this).addClass("over");
    },
    function(){
        // on out, remove class
        $(this).removeClass("over");
    }
);

スパン操作には CSS を使用します。お気に入り：

.over span {color:red;}

編集:スパンでのみホバーを処理する場合は、セレクターを次のように変更するだけです。

$(".wrap-faq span")

score 0 · Accepted Answer

これはあなたが望んでいるものだと思います：

http://jsfiddle.net/jz73b/1/

$(".contents-faq").on("mouseover", '.wrap-faq', function() {
    $(".wrap-faq .faq .txt-preg-faq").css("color", "white")
    $(this).addClass("over");
}).on("mouseleave", '.wrap-faq', function() {
    $(this).removeClass("over");
});

score 0 · Accepted Answer

hoverFaq関数に次の行を追加するだけです。

$(this).find('span').css('color', 'white');

ここで動作しています：http://jsfiddle.net/jz73b/2/

jquery - セレクタJquery

4 に答える 4

Related

Reference