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, Dec 10 '15 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
boxes with background-colors? Thanks! :) — StinkyTofu, Dec 10 '15 at 22:05
There: http://jsfiddle.net/4417zugn/36/ it's very simple CSS, I would avoid jQuery for that. — veksen, Dec 10 '15 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, Dec 10 '15 at 22:21
It's not new, but IE6 (I forgot about IE7) had trouble with :hover on anything else than an achor tag (``). — veksen, Dec 10 '15 at 22:31

Shomz · Accepted Answer · 2015-12-10T21:20:19.280

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 '15 at 21:20

answered Dec 10 '15 at 21:11

Shomz

37,421
4
57
85

Thanks A bunch! This helped me a- lot understanding how to use the This function. – StinkyTofu Dec 10 '15 at 22:22
You're welcome! I hope I covered all relevant scenarios. – Shomz Dec 10 '15 at 22:31

score 1 · Answer 2 · answered Dec 10 '15 at 21:21

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 '15 at 21:21

mark_c

1,202
1
8
10

Why wouldn't you do the whole thing in CSS then? – Shomz Dec 10 '15 at 21:22
Because it's not clear in the question what the 'fp_hover' class is being used for. It may not be for styling alone. – mark_c Dec 10 '15 at 21:27

Sumit Sahay · Answer 3 · 2015-12-10T21:44:18.617

$(".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/

score 0 · Answer 4 · edited May 23 '17 at 12:23

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

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

4 Answers4