Mobile JavaScript hover & How to select all classes to hover not just the first class

JavaScript
1

Hello,
I have a CSS hover that works on everything BUT touch screens…

The only solutions is to write JavaScript touchstart event function. Which I have written and works, but only works on the first img.

The document.query.Selector will only select the first class… what can I use to select all classes to be hovered over…? selectorAll does not work… you can only select one…

The other option I see is to write a line code for each image, but I know there has to be easier way, or somthing in JS that will select all classes - not just the 1st one or only one.

Here is my code:

const overlayEl = document.querySelector(".overlay");

function touchStart (){
overlayEl.addEventListener(“touchstart”, function(){
overlayEl.classList.add(“overlay2”);
})
}
touchStart()

my site: https://ainneo.github.io/cyber-ainne/
ON desktop it looks fine… on mobile it doesnt work…

Please help!

THANK YOU

2

What do you mean by querySelectorAll not working? Remember it returns a NodeList so you have to loop over it.

3

And remember, when you have a NodeList, it’s not actually an Array - it’s an “Array-like construct”. I often prefer to convert my NodeList to a true Array:

// the spread operator (...) inside the array brackets turns the NodeList to an Array!
let allTheElz = [...document.querySelectorAll('.els-with-this-class') ];
1 Like
4

i tried using selectoAll and it will only grab one class item… not all of them…

5

Also it only applies 1st class item the css rules… none of the other classes…

6

Are you sure about that? When I run querySelectorAll from the console I get back a list of elements.

const overlays = document.querySelectorAll(".overlay");
overlays
NodeList(6)
​
0: <a class="overlay" href="https://codepen.io/ainneo/pen/JgGJYV">​
1: <a class="overlay" href="https://ainneo.github.io/fcc-tribute-pg/">​
2: <a class="overlay" href="https://codepen.io/ainneo/pen/BXyOwa?editors=1100">​
3: <a class="overlay" href="https://ainneo.github.io/">​
4: <a class="overlay" href="https://twinsy.io">​
5: a.overlay

I didn’t really test it but something like this should work I would think (does not work in IE).
Edit: changed .add to .toggle

const overlays = document.querySelectorAll(".overlay");

overlays.forEach(overlay => {
  overlay.addEventListener('touchstart', () => overlay.classList.toggle("overlay2"))
})

Edit 2:

I don’t remember testing touch events. It might be that you have to set up an event listener for touchend as well to remove the class. You might also have to use preventDefault.

const overlays = document.querySelectorAll('.overlay');

overlays.forEach(overlay => {
  overlay.addEventListener('touchstart', e => {
    e.preventDefault();
    overlay.classList.add('overlay2');
  });

  overlay.addEventListener('touchend', e => {
    e.preventDefault();
    overlay.classList.remove('overlay2');
  });
});
1 Like
7

thank you! this worked… I don’t know what i was doing wrong… I am going back to analyze my code… to see what i did wrong.

1 Like