Hide Element when hover Element Javascript

Question

I have a DIV that needs to be displayed/hide whenever i hover a menu item.

Here it is my website: Website

The Blug light section should be displayed only when I hover the Photo Booths menu on the header.

I have tried the following code on JSFiddle which it works but when i use it on my site it doesn't work

<script>
let test = document.getElementByClassName(".menu-item.menu-item-7912");

test.addEventListener("mouseover", function( event ) {
document.getElementById('test2').style.display = 'none';
});

test.addEventListener("mouseleave", function( event ) {

document.getElementById('mega-menu-customized').style.display = 'block';

});

</script>

I have tried using getElementByClassName but without success. Any ideas of how to make it work?

There is getElementsByClassName but not getElementByClassName available. You can refer link https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name to understand this. — YATIN GUPTA, Dec 09 '20 at 04:32
If you want to provide multiple classes, you can do so by document.getElementsByClassName("class1 class2"). You will get HTMLNodeCollection upon which you can use Array.from to get collection in array. — YATIN GUPTA, Dec 09 '20 at 04:40
@quantumPuter here it is: https://jsfiddle.net/alejoblue/co7dq1yt/1/ — Alejo_Blue, Dec 09 '20 at 05:16

score 0 · Answer 1 · answered Dec 09 '20 at 04:33

0

Are you getting DOM node in test variable, one problem I can see in your code is:

let test = document.getElementsByClassName(".menu-item.menu-item-7912");

Should be:

let test = document.getElementsByClassName("menu-item, menu-item-7912");

We do not use dot before class name and multiple classes can be separated by comma like:

let test = document.getElementsByClassName("class1, class2, class3");

answered Dec 09 '20 at 04:33

Manoj

2,059
3
12
24

I just tested this using the ClassName, but it seems im doing something wrong because it doesn't work: https://jsfiddle.net/alejoblue/dLcqru52/ All the elements have to use ClassName, because the other element i want to show is using ID. Using ElementsById works look here: https://jsfiddle.net/alejoblue/co7dq1yt/1/ – Alejo_Blue Dec 09 '20 at 05:26
there are few problems in your code, check here the working one https://codepen.io/upretim/pen/VwKKjww instead of test.addEventListener use test[0].addEventListener because test is an array of nodes. – Manoj Dec 09 '20 at 05:52
i see the sample you send works fine. I put on my site but it didn't work: https://nycphoto.pixl.work/ im getting to think that im targeting the wrong element – Alejo_Blue Dec 09 '20 at 06:17

score 0 · Answer 2 · answered Dec 09 '20 at 04:37

Your issue is in the header element. On scroll, the style property of the document header is changing. Look:

^{sorry for the bad quality, upload size is maxed at 2MB}

Without getting into too much detail, one thing that I see is that the height of the header is being reduced to only contain the main header. When the larger blue subheader is visible, part of that is because the style.height of the header is made to be much larger. Additionally, the first child of the header is a div with id 7905, and that seems to be what you need to target to modify the opacity of the larger blue header. You need to target that div:

const blueBannerContainer = document.getElementById('7905')

But your event handlers will also need to account for the height of the header element. display: block won't really help you here.

the sticky header is ok, that's the way it should work. The problem is that the javascript is not being applied, im not sure ig im getting the right element — Alejo_Blue, Dec 09 '20 at 06:51

Hide Element when hover Element Javascript

2 Answers2