How do add a class to another div, when hovering over one div?-CodePudding

I am trying to add class to .sectionmenu div, but for some reason it adds the class to both the div elements when I hover over the .tabone .toggleClass, the div has same the class.

When you hover our first div i.e .tabone .toggleClass it should add class to first div .sectionmenu, similarly when you hover our the second div i.e .tabone .toggleClass it should add class to second div .sectionmenu.

(function($) {
  $(document).ready(function() {
    $('.tabone .toggleClass').hover(function() {
      var mine = $(this).closest('.menubox');
      $(this).closest('.main-section').find('.sectionmenu').not(mine).removeClass('class_name');
      mine.addClass('class_name');
    });
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="col1">
    <div >hidden text</div>
  </div>
  <div id="col2" >
    <div > --> when hover over this div it should add class to first .sectionmenu div
      <a >toggleClass</a>
      <a >toggleClass</a>
    </div>
    <div >
      <a >toggleClass</a>
      <a >toggleClass</a>
    </div>
  </div>
  <div id="col3" >
    <div >
      <div >
        <a >toggleClass</a>
        <a >toggleClass</a>
      </div>
    </div>
    <div >
      <div >
        <a >toggleClass</a>
        <a >toggleClass</a>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

One approach is as follows, here we use jQuery to add a custom data-* attribute in order to relate the elements together:

// here we select elements with an 'id' attribute that starts with
// the string 'col',
// we then iterate over that collection of elements using the
// each() method:
$('[id^=col]').each(function() {
  // caching variables to avoid - where possible - repeated look-ups
  // for the same items;
  // here we cache the current element:
  let ancestor = $(this),
    // we then cache the '.menubox' descendants of the
    // current element:
    menuboxes = ancestor.find('.menubox'),
    // we then cache the '.toggleClass' elements:
    toggleClassLinks = ancestor.find('.toggleClass');

  // iterating over the menuboxes collection, and setting the
  // custom 'data-*' attribute (here named 'data-index'),
  // to contain the index of the current .menubox element
  // within the collection, or its index within the current
  // [id^=col] element:
  menuboxes.attr('data-index', function(i) {
    return i;
  });

  // if there are a non-zero number of '.toggleClass' elements:
  if (toggleClassLinks.length) {
    // we iterate over that collection and use the on() method
    // to bind the anonymous function as an event-handler for
    // the 'mouseenter' event:
    toggleClassLinks.on('mouseenter', function(e) {
      // caching the current .toggleClass element:
      let target = $(this),
        // caching the various elements:
        grandparent = target.closest('.main-section'),
        parent = target.closest('.menubox'),
        // caching the attribute-value of the 'data-index'
        // attribute we set earlier, using the data() method
        // (because of a peculiarity of the method we couldn't
        // set the attribute using that method, but retrieving
        // is consistent):
        index = parent.data('index');

      // here we find the elements with the class of 'class_name' within the
      // ancestor element, and remove that class:
      grandparent.find('.class_name').removeClass('class_name');

      // here we use a template-literal string to interpolate the 'index'
      // variable into the string, to create an attribute-selector wherein
      // the index is equal to the index of the currently hovered .toggleClass
      // element's parent:
      grandparent.find(`[data-index=${index}]`)
        // we then filter out the current .toggleClass element's parent:
        .not(parent)
        // and add the class_name class to the other remaining element(s)
        // that matched the original selector:
        .addClass('class_name');
    });
  }
});

*,
::before,
::after {
  box-sizing: border-box;
  font: 1rem / 1.5 sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid #000;
  padding: 0.5em;
}

.main-section {
  border-color: transparent;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  min-height: 50vh;
}

.main-section>div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.class_name,
.class_name .toggleClass {
  color: #f90;
  transition: color 0.3s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="col1">
    <div >hidden text</div>
  </div>
  <div id="col2" >
    <div >
      <a href="#" >toggleClass</a>
    </div>
    <div >
      <a href="#" >toggleClass</a>
    </div>
  </div>
  <div id="col3" >
    <div >
      <div >
        <a href="#" >toggleClass</a>
      </div>
    </div>
    <div >
      <div >
        <a href="#" >toggleClass</a>
      </div>
    </div>
  </div>
</div>

JS Fiddle demo.

References: