选择器jQuery

Question

Hello iam learning jquery and JavaScript and i have a bunch of divs and span inside them, all this div has the same class, and also the span all of them has the same class what i want is when i do mouse over on a div, change the color of the letters with the tag span inside that div. ill let you how i structured my cod and my jquery function. i would like to know how i can use selector to achieve this.

this is the 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/

Answer 1

I think that you want a simple CSS hover:

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

This http://jsfiddle.net/saYFz/ is what you want?

Answer 2

This code will add a CSS class to div when you hover over it:

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

Use CSS for the span manipulation. Like:

.over span {color:red;}

Edit: If you want to process the hover only at span, you can simply modify the selector to:

$(".wrap-faq span")

Answer 3

I'm guessing this is more what you're wanting:

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

Answer 4

Just add this line in your hoverFaq function:

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

Here you have it working: http://jsfiddle.net/jz73b/2/