Streaming live at 10am (PST)

Is there a way to create a simultaneous hover?

hi all

I am currently facing a huge problem, because I’m trying something out and I can’t find a solution so I’m starting to get a little bit desperate. so here it goes:

I have kind of a table design with different dropdowns (sector 1, 2, 3 etc.). when cklicking on the dropdown which is shown in the image, the bar graph is animated, so the bars grow (see attached image).
additionally, there is another table on the side and after the page is loaded there is another animation/interaction and this should be a hover but also a clicked state. what I am trying to do, is a simultaneous hover, so when you hover over the bar groud “cd” there is also a hover over the table row “cd” and if you hover over a row, the same happpens with the corresponding bar group.

I would be really happy if anybody could help me out with this issue and tell me how to proceed because I really don’t know how to solve this problem plus I’m quite new to webflow.

thank you so much!

Can you please share your Read-Only/Share Link as well as the Live Link so others can view what you have going on in your project to help you?

With IX, you can make hovers work at the same time.

I used 1 IX on the bar: it set the grayscale filter to 0 for one of the graph group.

Then 1 filter on each column item, that is using filter invert on one bar.

And even if I don’t let padding to show the bar under the column items it works.

At the moment it is just a preview image I made to visualize the idea. I was thinking of doing the table (on the right side) with a grid element with one column and eight rows, in order to being able to make the hover over the whole line.

And for the hover of the bars, I would just do a mouse hover interaction (hover in and out). But the question is, how do I “combine” these two interactions, so they happen at the same time? I’m not even sure, if this would be the right procedure?

http://sbx.webflow.io/

Oh wow, thank you vincent, I will try it out! :slight_smile:

Here’s the read only link

https://preview.webflow.com/preview/sbx?utm_source=sbx&preview=3ec033cabc671d9aed325632b7d7daa3

Oh my bad… I misunderstood what you were after. Glad Vincent could help!

no problem, I will check it out and see if I can do this with the design I’m trying to make :slight_smile: hope I can come back to you guys if I’m having difficulties with it.

My demo uses one IX per item plus one for the bar, so it’s far from ideal, because you’d have to create one ix for one col item, for each line, for each table… And it’s very difficult in your design to use the restrictions like “child of” or “parent of” or “sibling” because your col items and bars will never be eithe child, sibling or parent elements of each others.

HOWEVER, my IX works with filters, and the bar turns colored red because it’s the inverse of the green AND because the group is in color. So you could make the IX of each coloumn target ALL the class of all the bars (1st bar of each graph, 2nd of each graph…) but only the one of the current row will stand out because only its group is in color…

thanks, I tried it out quickly and could manage to do it with filters (grayscale), but on page load there should be first an animation of the bars (bar grow) and afterwards the hovers. this way, there would be always one bar group already selected/hovered (color) from the beginning, without hovering over a row of the table, am I right?