11526 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous, je vais essayer d'être clair dans mes explications Smiley cligne

Je souhaite modifier le curseur de la souris sur mon site, jusque là, rien de compliqué,
ensuite je récupère le texte de l'élément que je survol, pour l'afficher dans le curseur.
Un exemple de rendu ici.

Lorsque j'appelle un élément unique de cette façon
const newsElement = document.querySelector('.newsImg');

Y'a pas de problème, je fais ensuite

function mouseHoverFunction(element = null, removeClass = null, addClass = null, content = null) {
    if (element) {
        mouseContainer.classList.remove(removeClass)
        mouseContainer.classList.add(addClass)
        mouseContent.textContent = content ? element.children[0].innerText : ''
    } else {
        mouseContainer.classList.remove('zoomOut')
        mouseContainer.classList.remove('isHovering')
        mouseContent.textContent = ''
    }
}
if (newsElement !== null && newsElement.matches(':hover')) {
        mouseHoverFunction(newsElement , 'isHovering', 'zoomOut', true)
}


Jusque là tout va bien, sauf que vous me voyez venir Smiley biggrin , je vais pas m'amuser à appeler tous les éléments, un par un, de mon site.
Donc dans l'idée, ayant des classes génériques, je fais un poil différemment, j'utilise le
querySelectorAll()
ce qui me créé une NodeList, puis une boucle sur la liste =>

const blockElement = document.querySelectorAll('.category-block')
blockElement.forEach(el => {
        if (el !== null && el.matches(':hover')) {
            mouseHoverFunction(el, 'zoomOut', 'isHovering', true)
        }else {
            mouseHoverFunction()
        }
    })

Sauf que cela ne fonctionne pas, seul le survol du dernier élément fonctionne et affiche bien le texte.

Ma question est donc, comment faire pour que tous les éléments soit pris en compte ?
Sachant qu'un
console.log(el)
dans la condition affiche bien chaque élément à son survol.

En vous remerciant Smiley cligne
Modifié par RhumIsis (23 Jun 2023 - 08:27)