Hi
I want to build this domain page where i have a bunch of icons which you can hover over, they would make a text block appear. Now i’m stuck at doing the interactions. Ideally when you hover over an icon: the text block appears and stays when you hover out. If you hover over another icon, another block appears which also replaces the former text block. I made a gif with the design and general idea, I hope you guys can help me. I’ve been struggling. Thanks!
When you have such a behavior, the IX scenario should go like this:
On Hover In
- Hide all texts of the class (action targeting the chole class, all elements with that class)
- show text of that class but limited to children (actually shows text of the element you’re hovering)
This way you don’t even need a hover out IX. Everytime you’ll hing, it will hide all other previously opened text and show the appropriate one. And if there is nothing to hide wll it goes unnoticed.
3 Likes
This is a great solution! I like it… I had similar design issue and I have solved it with custom JQuery code that was toggling comboclasses for other items… like that:
$('.galleryitem').on('click', function() {
$(this).find('.dynamictextcontainer').toggleClass('infotxt')
$('.galleryitem').not($(this)).find('.dynamictextcontainer').removeClass('infotxt')
}, )
This is pretty handy and works with a lot of animations and sometimes easier than IX.
PS. if you want to animate the appearance/disappearance of the various elements you should add “transitions”
2 Likes
Hi Vincent,
How do i target the whole class in one action, and target only children in another? (while in the same hover in interaction)
If i try to change the first opacity action to whole class, and change the second to only children — the first one changes to only children as well.
I’m quite new to all this, admittedly i’m just a designer without that much experience in websites. I’m sorry if the solution is straight forward. I can’t seem to find the answer.
Thanks!
Ah there’s that… it doable with IX Legacy without buming into that issue, but it’s possible to tackle that issue too with IX2, here’s the trick.
You’re going to make Webflow think there are different element by using combo class.
The element you need to trigger on and off, give it a combo class. So wo classes, like this for example: .class1.combo.
And you temporary create a div with the class .combo only.
You set your IX action for hiding all elements: target the element itself, it will only take the first class in consideration for the target, so .class1, target all elements.
Then you select the temporary div, Webflow will then target .combo, and you set the show with the limitation to children only. And as Webflow thinks it’s another element, there’s then no conflict and your other action stays on targeting all elements with the class, and this new action target only children.
You can now delete the temporary element. Your IX will target to classes but the same element.
This neat trick was the one I found for targetting elements with combo with IX Legacy.
1 Like
Hi Vincent
The combo trick did not work for me… I did get it to work by directly selecting the div i wanted to appear. However when swiping from one to another quickly: you get to see more than one text blocks. Also if you hover over the transcriptomics-icon, scroll down and scroll back up: the genomics text shows and transcriptomics text dissapears even though i didnt set up any interactions for that to happen. Maybe i’m doing it wrong…
Here’s a new updated link, is there any way you can show me how to do it properly?
Thanks again