0

I'm working on a pricing table with some hover. You can see it right here: http://lhit.nl/lucid/

As you see, when you hover on a pricing table all the divs toggle the classes. And thats not what I want. I want it to be seprate ofcourse.

My jQuery:

$('.package').hover(function(){
     $('.name').toggleClass('name-hover')
     $('.price-container').toggleClass('price-hover')
     $('.price').toggleClass('white-hover')
     $('.month').toggleClass('white-hover')
 });

The css is just to overwrite current colors:

    .package .price-hover {
        background: #008ed6;
    }

    .package .white-hover {
        color: #fff;
    }

I already tried to use $(this) but it doesn't work.

Improve this question
4
  • make css for hover. .name:hover{background: #008ed6;} and etc
    – Vlad Krasovsky
    Commented May 19, 2016 at 16:39
  • create a class that has the on hover css and then when the div is hovered then toggle that class
    – Dhaval Chheda
    Commented May 19, 2016 at 16:39
  • 1
    Might also try using $(this).find('.name')... to target just the one nested inside of the specific hover item.
    – nurdyguy
    Commented May 19, 2016 at 16:43
  • well you select all of the elements, the code does not know you want to select only the ones inside that element.
    – epascarello
    Commented May 19, 2016 at 16:44

5 Answers 5

Reset to default
2 
$('.package').hover(function(){
    $(this).find('.name').toggleClass('name-hover')
    $(this).find('.price-container').toggleClass('price-hover')
    $(this).find('.price').toggleClass('white-hover')
    $(this).find('.month').toggleClass('white-hover')
});
Improve this answer
1
  • You could also use $('.name',$(this)).toggleClass('name-hover') instead of .find
    – Steve
    Commented May 19, 2016 at 17:40
2

This can be simply achieved just by css. Why to add Js for this ?

package:hover .price-container{
    background: #008ed6;
}
Improve this answer
3
  • That would actually make the most sense, however if the classes were to be reused on a different class set then it would require duplication.
    – MCMXCII
    Commented May 19, 2016 at 17:58
  • @MCMXCII - The amount of code you write in Javascript in this case to reuse class is much more than you actually have to duplicate with different class set. So for example let's say there is package2 where we need to apply this, then you simply add it like this : package:hover .price-container, package2:hover .container{ background: #008ed6;}. Now compare it against the amount of javascript code.
    – Mahesh Chavda
    Commented May 19, 2016 at 18:16
  • Thanks! I didn't know you that I could use children behind a hover. Thanks!
    – dutchcube
    Commented May 19, 2016 at 22:34
1

You could use each():

  $('package').each(function() {
    var _this = this;
    $(this).hover(function() {
      $(_this).find('.name').toggleClass('name-hover')
      $(_this).find('.price-container').toggleClass('price-hover')
      $(_this).find('.price').toggleClass('white-hover')
      $(_this).find('.month').toggleClass('white-hover')
    });
  })
Improve this answer
0
  • First you need to use find to only change the classes for elements inside the currently hovered over .package, otherwise it will change classes for all these elements.
  • Secondly, hover event takes 2 functions, one when mouse enters the hover area, second when cursor exits the hover area. The way you are handling hover event, it toggles the classes twice, once on hover in, once on hover out, so in the end leaving it same as before.

Try this code:

$('.package').hover(function(){
     $(this).find('.name').addClass('name-hover');
     $(this).find('.price-container').addClass('price-hover');
     $(this).find('.price').addClass('white-hover');
     $(this).find('.month').addClass('white-hover');
 }, function(){
     $(this).find('.name').removeClass('name-hover');
     $(this).find('.price-container').removeClass('price-hover');
     $(this).find('.price').removeClass('white-hover');
     $(this).find('.month').removeClass('white-hover');
 });
Improve this answer
-1 
$(".package").hover(function() {
    $this = $(this);
    $this.find(".name").toggleClass("name-hover");
    $this.find(".price-container").toggleClass("price-hover");
    $this.find(".price,.month").toggleClass("white-hover");
});

@Spartak Lalaj As of jQuery 1.4 the .hover() may have one parameter. See https://api.jquery.com/hover/

Improve this answer
4
  • Why do you need to redeclare this?
    – MCMXCII
    Commented May 19, 2016 at 18:00
  • To bypass redundant selector detection operation. In fact, some editors (e.g. PhpStorm) may trigger optimization warning if there are unnecessary selectors in the code.
    – Vagharsh
    Commented May 19, 2016 at 19:32
  • Thank you guys, it definitely helped me a lot on the jQuery side. But now I want to happen the hover event on the .order button on the website. Its actually quite hard to do. I cant do it with just changing .package by .order.
    – dutchcube
    Commented May 19, 2016 at 22:57
  • I don't fully understand what you mean, but you can refer the parent .package from .order as $(".order").hover(function() { $package=$(this).closest("div.package"); $package.find..... });
    – Vagharsh
    Commented May 20, 2016 at 8:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.