How do I hide an element higher up the tree by hovering on an element lower down the tree

Question

I want to hide the element with class = "product-details-card" by hovering over the element with class = "v-content__wrap".

See this website

http://webtest.brooksbingham.com/module/bespokestudio/viewer#/

This is a part of my code:

<div class="product-details-card">
  card
</div>

<main class="v-content">
  <div class="v-content__wrap">
    <div class="viewport-wrapper">
       1234
      <canvas>

    </div>
 </div>
</main>

This is a codepen:

https://codepen.io/boidurja-talukdar/pen/dybjQrq

I tried using javascript. But it was not working.

document.getElementsByClassName("v-content__wrap")[0].onmouseover = f1();

document.getElementsByClassName("v-content__wrap")[0].onmouseout = f2();

function f1() {
    document.getElementsByClassName("product-details-card")[0].style.display = "none";
}

function f2() {
    document.getElementsByClassName("product-details-card")[0].style.display = "block";
}

Note: I can't change the html code since it is in Prestashop.

by using javascript. also in future please put the code in the question itself - links to codepen must be acoompanied by the code in the question itself, that's why you were asked to put code in the question - getting around this by marking the links as code is annoying in 2 ways -1 you blatantly ignored the warning, 2 we can no longer click on the links — Pete, Sep 16 '19 at 09:01
You can't with plain CSS, since there is not a parent selector. You can achieve it only using JavaScript — Christian Vincenzo Traina, Sep 16 '19 at 09:01
@BoidurjaTalukdar try something, then if you have JS problems we can help. — Mitya, Sep 16 '19 at 13:12

adr5240 · Answer 1 · 2019-09-16T14:32:09.473

When setting these functions:

document.getElementsByClassName("v-content__wrap")[0].onmouseover = f1();

document.getElementsByClassName("v-content__wrap")[0].onmouseout = f2();

Do NOT invoke them (add the parenthesis). You are setting the mouseover and mouseout to the return values of these functions, not the functions themselves. Since the return value is null nothing will happen. Do this instead:

document.getElementsByClassName("v-content__wrap")[0].onmouseover = f1;

document.getElementsByClassName("v-content__wrap")[0].onmouseout = f2;

I'd also recommend setting an explicit height/width to the v-content__wrap element because when you set the display to none, there is a chance that your mouse will no longer be hovering over that element (try mouseenter from the bottom) and will lead to flickering. Alternatively, you could set the opacity to 0

How do I hide an element higher up the tree by hovering on an element lower down the tree

1 Answers1