Add and remove class on hover on specific child div using Javascript

Replies: 0

I’m currently building a custom hover effect while using WP-Bakery, what I’m trying to achieve is easy using HTML and 1 child div but due to the builder’s effect of adding additional divs I’m lost on how to achieve this.

I’m thinking of using js to achieve this because once a user hovers right to left (Mary to John) the appearing div is stuck and does not go back to its original place as it does when hovered left to right (John to Mary). I’ve been thinking of using a simple JS add & remove script but I do not know how to append this to the class within multiple child divs.

My code is as follows currently just using CSS to achieve this effect:

HTML:

<section class="vc_section people-grid scrolled-into-view">
  <section class="vc_row liquid-row-shadowbox-62c2eed0a238f">
    <div class="ld-container container">
      <div class="row ld-row ld-row-outer">
        <div class="wpb_column vc_column_container vc_col-sm-6 liquid-column-62c2eed0b46d4">
          <div class="vc_column-inner  ">
            <div class="wpb_wrapper">
              <div class="wpb_single_image wpb_content_element vc_align_  liquid_vc_single_image-62c2eed0b5572">

                <figure class="wpb_wrapper vc_figure">
                  <div class="vc_single_image-wrapper   "><img width="50%" src="https://hub.liquid-themes.com/wp-content/uploads/2019/11/img-1@2x.jpg" /></div>
                </figure>
              </div>

              <div class="wpb_text_column wpb_content_element  main-description">
                <div class="wpb_wrapper">
                  <h2>John</h2>
                </div>
              </div>

              <div class="wpb_text_column wpb_content_element  description hover-team right">
                <div class="wpb_wrapper">
                  <h2>John</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wpb_column vc_column_container vc_col-sm-6 liquid-column-62c2eed0b5f9b">
          <div class="vc_column-inner  ">
            <div class="wpb_wrapper">
              <div class="wpb_single_image wpb_content_element vc_align_  liquid_vc_single_image-62c2eed0bdfa6">

                <figure class="wpb_wrapper vc_figure">
                  <div class="vc_single_image-wrapper loaded"><img width="50%" src="https://hub.liquid-themes.com/wp-content/uploads/2019/11/img@2x.jpg" /></div>
                </figure>
              </div>

              <div class="wpb_text_column wpb_content_element  main-description">
                <div class="wpb_wrapper">
                  <h2>Mary</h2>
                </div>
              </div>

              <div class="wpb_text_column wpb_content_element  description hover-team left">
                <div class="wpb_wrapper">
                  <h2>Mary</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>

CSS:

.description {
  position: absolute;
  height: 60%;
  background: transparent;
  z-index: 9999;
  width: 100%;
  top: 0;
}

.hover-team>.wpb_wrapper {
  width: 50%;
  height: 100%;
  opacity: 0;
  padding: 10%;
  transition: all 400ms ease-in-out;
}

.description:hover>.wpb_wrapper {
  display: block !important;
  transform: inherit;
  top: 0;
  position: absolute;
  z-index: 99999;
  width: 50%;
  height: 100%;
  background: #E9E9E5;
  padding: 10%;
  opacity: 1;
}

.left:hover>.wpb_wrapper {
    transform: translateX(-73.5%);
}
.right:hover>.wpb_wrapper {
    transform: translateX(53.5%);
}

.row {
  width: 100%;
  display: inline-flex;
}

.vc_col-sm-6 {
  width: 50%;
}

Fiddle link: https://jsfiddle.net/d1tojys0/1/