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

Question

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

is there a reason you're handling this with jQuery? Do you have access to the CSS? — veksen
– veksen, Commented Dec 10, 2015 at 21:13
Mostly because Jquery is the newest language i'm learning, so i thought it would be a easy way to achieve this affect. Could you give me a demo of the CSS alternative maybe on some simple <Div> boxes with background-colors? Thanks! :) — StinkyTofu
– StinkyTofu, Commented Dec 10, 2015 at 22:05
There: jsfiddle.net/4417zugn/36 it's very simple CSS, I would avoid jQuery for that. — veksen
– veksen, Commented Dec 10, 2015 at 22:16
Thanks a bunch. I had no idea CSS had the ability to do something like this. I thought it was limited to by it's own element. I will use this alternative instead. Atleast i learned both ways to-do this. Thanks a bunch! Is this something new with CSS? — StinkyTofu
– StinkyTofu, Commented Dec 10, 2015 at 22:21
It's not new, but IE6 (I forgot about IE7) had trouble with :hover on anything else than an achor tag (<a>). — veksen
– veksen, Commented Dec 10, 2015 at 22:31

Shomz · Accepted Answer · 2015-12-10 21:20:19Z

3

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/

edited Dec 10, 2015 at 21:20

answered Dec 10, 2015 at 21:11

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StinkyTofu Over a year ago

Thanks A bunch! This helped me a- lot understanding how to use the This function.

Shomz Over a year ago

You're welcome! I hope I covered all relevant scenarios.

mark_c · Accepted Answer · 2015-12-10 21:21:03Z

1

There's no need to use jQuery to alter the CSS you can do that in the CSS itself using the :hover selector. You can then use jQuery to toggle the 'fp_hover' class.

$('.featured_products').hover(function(){
    $(this).toggleClass('fp_hover')
})

https://jsfiddle.net/Lozgnz84/

answered Dec 10, 2015 at 21:21

mark_c

1,2121 gold badge8 silver badges10 bronze badges

2 Comments

Shomz Over a year ago

Why wouldn't you do the whole thing in CSS then?

mark_c Over a year ago

Because it's not clear in the question what the 'fp_hover' class is being used for. It may not be for styling alone.

Sumit Sahay · Accepted Answer · 2015-12-10 21:44:18Z

0

$(".fp_button") is common for both the divs; so instead of writing:

$(".fp_button").css("background-color", "white");

Write: $(this).find('.fp_button').css("color", "#FFFFFF");

Hence, your code becomes

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

demo here: http://jsfiddle.net/znnamrwn/

edited Dec 10, 2015 at 21:44

answered Dec 10, 2015 at 21:37

Sumit Sahay

5144 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:23:12Z

0

What you've described can be done without jQuery. If however you would like to use jQuery you could simply toggle a class on the product element.

$('.featured_products').on({
    mouseenter: function() {
        $(this).toggleClass('fp_hover');
    },
    mouseleave: function() {
        $(this).toggleClass('fp_hover');
    }
}, '.featured_product');

http://jsfiddle.net/bradlilley/uwxsr4hu

You can also do the above without jQuery by simple adding the following hover state in your css.

.featured_product:hover .fp_button {
    background: #f00;
    color: #000;
}

https://jsfiddle.net/bradlilley/9mwxo9o2/6/

Edit: You should also avoid using mouseover and use mouseenter instead.

Jquery mouseenter() vs mouseover()

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Dec 10, 2015 at 22:04

Brad Lilley

437 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related