Is it possible to detect a touchscreen or no cursor device so there can be a custom hover over interaction only when there's no cursor?

Design help Animations & Interactions
1

I’m trying to add a hover over interaction that basically acts like the center of the screen is a hover over trigger, so when scrolling down the page and a card is in the center of the screen it hovers like a hover over, but I only want it to do this when it’s a device that doesn’t have a mouse cursor. Right now, even when it’s a device with a cursor, when the screen is in tablet or mobile view, it will do the hover over without the cursor being over it. I want it only to do this when there’s no cursor.

Here is my public share link: LINK
(how to access public share link)

2

hi @Winnal and welcome as this forum is about Weblow platform please use it for solving problems in Webflow.

However, to get answer to your question feel free to use your preferred browser to search internet. Here are just few examples

https://javascript.plainenglish.io/how-to-detect-a-mobile-device-with-javascript-1c26e0002b31

then you can implement your conditions using JS when mobile browser is detected.

3

Yes im trying to do it in Webflow but you’re saying I need js to detect it

4

Hi @Winnal yes you need JS to detect mobile browser but this detection is not specific to Webflow directly. Implementing JS to WF can be done in WF areas used for custom code. More info how to implement custom code can be found on Webflow university.

If you do not have further questions related to this topic feel free to close this request as solved.