Html – Desynchronized hover elements on touch devices

I’ve created a simple HTML that includes an image with a 3px white border around it and text below the image. Here is the HTML: https://jsbin.com/rofisiwoya/edit?html,output

When you hover over the image, the border around it turns red (#ff4444). However, since this represents a video, I wanted the border around the image and the text to turn red at the same time no matter which element you’re hovering over, pretty much linking the hover effect for both elements.

So, I did that using javascript. On my computer, you can hover over either element and it will activate the hover effect for both. There’s not really a way you could de-synchronize them. However, the hover effect works much differently on touch devices since you can’t really hover over them, you can only click things or press down to hold. So, I added this javascript for touch devices:

`
const ZodiacThumbnail = document.getElementById(‘zodiac-thumbnail’);
const ZodiacTitle = document.getElementById(‘zodiac-title’);

    function applyActiveState() {
        ZodiacTitle.classList.add('active');
        ZodiacThumbnail.querySelector('a').classList.add('active');
    }

    function removeActiveState() {
        ZodiacTitle.classList.remove('active');
        ZodiacThumbnail.querySelector('a').classList.remove('active');
    }

    ZodiacThumbnail.addEventListener('mouseover', applyActiveState);
    ZodiacThumbnail.addEventListener('mouseout', removeActiveState);
    ZodiacTitle.addEventListener('mouseover', applyActiveState);
    ZodiacTitle.addEventListener('mouseout', removeActiveState);

    ZodiacThumbnail.addEventListener('touchstart', applyActiveState);
    ZodiacTitle.addEventListener('touchstart', applyActiveState);

    document.addEventListener('touchend', function(event) {
        if (!ZodiacThumbnail.contains(event.target) && !ZodiacTitle.contains(event.target)) {
            removeActiveState();
        }
    });
</script>`

This made it so that if you held down on either element, it would activate the hover effect for both elements. Like I mentioned though, hover works differently on touch devices, and I quickly figured out that you could de-synchronize these elements by simply doing this: https://streamable.com/wtlzzv

Now, realistically, do I think somebody is going to sit on their mobile phone messing around with my website? Well, no. But it annoys me quite a bit, and if there’s something I can add into my javascript that prevents this I would love to do so, even if it involves redoing the way that I "linked" the hover effect. If it was just the image and no text, there wouldn’t be anything to synchronize, but the fact that you can actually de-synchronize it with little to no effort isn’t exactly beautiful especially since a lot of people visiting my website will likely be using their mobile device.