Hover interraction for non cms item HELP

Design help General
1

Hello dear all :slight_smile:

I am building a website without any cms… the website will have alot of items. Some of the items will have another div covering its surface on mouse over…

I know how to creat interractions, I successfully build a mouse over interraction but when I set the interraction to be triggered by the element only, only that very item I applied the interraction will have the hover effect working… all other items with the same interraction won’t work.

My question is:

is it possible to get all items show the hover effect on mouse over with one single interraction that I would apply to all items ?

I know I can easily do that with CMS items, but for this project I can not use any CMS :frowning:
PS: at the moment, the effect is being triggered on every items whenever I hover over any item having the combo-class .item.hovering

My very simpified read only link
https://preview.webflow.com/preview/hover-v-1?utm_source=hover-v-1&preview=cff6a2a8ec0092e776924f2efbbad3a3

Screenshot%20(1141)
Screenshot%20(1141)1920×1080 66.7 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Ok, I solved my problem already !
I have used the “affect only children with this class” property !
Works like a charm :smiling_face_with_three_hearts:

Screenshot%20(1142)
Screenshot%20(1142)1920×1080 105 KB

3

I still do have a problem however:

The hovering effect works well on desktop but on mobile, when I tap the item the effect successfuly appears but when i tap a 2nd time, the effect remain, it doesn’t disapear like it should. Am I missing something ? :thinking:

Thank you !

New read-only link:

https://preview.webflow.com/preview/hover-v-2?utm_source=hover-v-2&preview=bd63fc994ecd0f0a70db61dcf1602e1d

4

Click somewhere else than the DIV that has the effect turned on. For example, if a square has the effect to happen on hover, click outside the square.

If the effect disappears, there’s nothing wrong. That’s just how mobile reads click interactions and translates it to the website.

5

I generally disable hover interactions if I can get away with it on mobile… I think it just provides a better UX for the end user.

6

I think that a good rule of thumb for designs is to not make your website’s functionality depend on the users hovering something. This way you avoid the problems you’re dealing with

3 Likes
7

Absolutely. Just visual fleur is fine for on hover but everything should be usable and accessible without relying on hovers.

3 Likes
8

Thank you so much everyone for the precious input !
I’ll have some good infos to talk about with the designer I’m working with :slight_smile:

Have good day ya’all !