How to change CSS over selected element only using $(this)


Tags: javascript,jquery,html,css

Problem :

I'm trying to make it where when the user .mouseover() the .featured_products the .featured_products, and the .button will apply the CSS affect to the selected container. The problem i'm encountering is it changes the .css of both the .feature_products containers. I'd like it to only change the one that's being .mouseover(). I tried using $(this) but i'm not understanding it correctly.

$(".featured_products").mouseover(function(){
    $(".fp_button").css("background-color", "#00addc");
    $(".fp_button").css("color", "#FFFFFF"); 
    $(this).addClass("fp_hover");
  });
  $(".featured_products").mouseleave(function(){
    $(".fp_button").css("background-color", "white");
    $(".fp_button").css("color", "#000000")
    $(".featured_products").removeClass("fp_hover");
  });

Here is my Demo



Solution :

You can use the second parameter in the selector to denote a parent, like:

$(".fp_button", this).css("background-color", "#00addc");

See it here: http://jsfiddle.net/4417zugn/31/


You can also do something like:

$(this).find(".fp_button")...

etc. There are many ways.

One thing I'd suggest is to change the class name instead of modifying individual CSS rules, like this: http://jsfiddle.net/4417zugn/33/


Last thing, this is all possible using only CSS, like this: http://jsfiddle.net/4417zugn/35/


    CSS Howto..

    How can I vertical align my
  • to the top of this box which uses `display: flex`?
  • How to set different column in table to be different width in css?

    android - How to build complex views that stretch?

    How many significant figures can a number have in CSS?

    How to write CSS3 animations with JavaScript objects?

    How to correctly set the column widths on my HTML table?

    How to use CSS to create a particular stylized, multi-lined text box?

    MeteorJs: how to add multiple js and css file based on templates.?

    how to give top property define in css for chrome or firefox

    How to prevent ALT text showing on cursor hover over image?

    How do I set a CSS width from a javascript function result?

    How to change HTML markup structure using javascript or CSS?

    How to apply css to three different classes hovering one of them

    Showing refresh button when animation is complete?

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to center equally spaced anchor tags in

    JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

    How to create a three-column website background using CSS?

    How to make width grow slowly when I add element?

    How to dynamically adapt the layout by using only CSS

    How can I vertically align text within a span element, or make the span the same size as the text?

    How to make element stay in the same position using css?

    How to place two canvases adjacent to each other and on top of a third one

    How to slide content opening up with jquery

    How to put the text at the center of inner div?

    How to add two images one in the right and other in the left side of the input textbox?

    Qt: Hower effect overlapped with selected tab

    How to keep floating labels floating after input. Pure CSS

    How to remove hover effect from a column of a table

    How to override a style of a specific Joomla module?