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

  • 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/[email protected]" /></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/[email protected]" /></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/

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    You’re targeting the description elements for the hover state, even though they are not initially visible. Mary’s description occurs later, so the hover state can “see” it even when John’s description is visible. The reverse cannot be true, when Mary’s description is visible, John’s is covered so the hover state cannot “see” it.

    You could probably resolve this by fiddling with the z-index layering of the elements, but I think it’s a poor solution. What I would do is have fully transparent elements which overlay everything, but are bounded by each image and caption extents. Hovering over these is what triggers the respective description visibility. Since they overlay everything, the hover state can always “see” these elements.

    I believe the descriptions will need to be child elements of these overlay elements for hover effects to be applied, but they can reside on a lower z-index.

    You’re going to have the layering issue with JS mouseover events. You’re better of with a pure CSS solution since both approaches require the layering to be resolved.

Viewing 1 replies (of 1 total)
  • The topic ‘Add and remove class on hover on specific child div using Javascript’ is closed to new replies.