on my fluent form in wordpress site i want to add class with jQuery to only one span on hover. But if i hover on option jquery add classes to all spans. problem is on step 3 website i just want to add class only hovered span i use this script

jQuery(".fluentform .ff-el-group.biele .ff-el-form-check.ff-el-image-holder").hover(
  function () {
    jQuery(".fluentform .ff-el-group.biele .ff-el-form-check.ff-el-image-holder label.ff-el-form-check-label span").addClass('active-hover');
  },
  function () {
    jQuery(".fluentform .ff-el-group.biele .ff-el-form-check.ff-el-image-holder label.ff-el-form-check-label span").removeClass("active-hover");
  }
);

image

CodePudding user response：

by using jQuery(this) (referring to the currently hovered element) u should be able to only add the class to the span inside the element

jQuery(".fluentform .ff-el-group.biele .ff-el-form-check.ff-el-image-holder").hover(
  function () {
    jQuery(this).find('span').addClass('active-hover');
  },
  function () {
    jQuery(this).find('span').removeClass('active-hover');
  }
);

the way u tried ".fluentform .ff-el-group.biele .ff-el-form-check.ff-el-image-holder label.ff-el-form-check-label span" will match all those spans (length = 8)