Question

I’m trying to create function that will do this same thing for 3 different classes. The only problem is that every time when I hove over any of the divs it affect all the others instead just one.

Could anyone advice me please how can I make it work separately for each class on hover stage:

$(document).ready(function() {
  $(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
    $(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
  }, function () {
    $(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
  });

});

Thank you for your help in advance.

Dom

Answer 1

If the divs have only one kind of subclass each, then it’s pretty simple:

$(document).ready(function() {
  $(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
    $(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
  }, function () {
    $(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
  });
});

If they have multiple subclasses, you’ll have to first check which class the current div belongs to and build the selector based on it.