CSS class not getting added using javascript on mobile version of website

Viewed 64

I have used the following code to add a class to an svg image on a Wordpress website.

window.addEventListener('load', function () {
    const svg = document.querySelector('svg')

    if (svg) {
        const items = document.querySelectorAll(
            '.woocommerce-grouped-product-list-item'
        )

        if (items) {
            items.forEach((item) => {
                item.addEventListener('mouseenter', (e) => {
                    item.classList.add('tab-brackground--active')
                    const text = e.target.children[0].innerText
                    jQuery(`[data-section="${text.toLowerCase()}"]`).addClass(
                        'svg--active'
                    )
                })
            })
        }
    }
}) 



item.classList.add('tab-brackground--active')

works on both my mobile and desktop version whereas

jQuery(`[data-section="${text.toLowerCase()}"]`).addClass('svg--active')

works only on my desktop version.

You'll can check it out yourselves on this link - https://ticketblaster.com.au/product/keith-urban-melbourne-friday-10th-december-2021/

What can I do to fix this?

1 Answers

@Ziyak, you have used mouseenter as eventListener, which only works for desktops and doesn't work on mobile. Try using events like touchmove, touchstart and touchend for mobile devices.

Related