CODEWITHSUNDEEP
jqueryhtmlcssjquery-selectors
Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

Selector Jquery

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/

Upvotes: 0

Views: 113

Answers (4)

Axel A. García
Axel A. García

Reputation: 683

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?

Upvotes: 3

Alvaro
Alvaro

Reputation: 41605

Just add this line in your hoverFaq function:

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

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

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

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

Upvotes: 0

Damb
Damb

Reputation: 14610

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

Upvotes: 0

Related Questions