This is an awesome community - you already knew that but it cannot be said enough - and I wanted to pay it forward and maybe help those - noobs like myself (that’s a double “o”!) - who may have been having similar issues relating to this subject and scratching their heads…
It’s obviously very simple to create a mouse over button hover effect.
However, if you’ve created a collection list and added say a “buy” button - within an e-commerce collection list for example - AND chosen the BG colour for the button from a collection item within the collection list, then it’s no longer possible to set a hover effect from the Style panel like you normally would…
What to do?
-
Create a “button-wrapper” DIV and set position to “Relative”.
-
Put buy button(s) inside “button-wrapper” DIV (make sure you’ve already styled and given a class to the button beforehand, like “buy-button”)
-
Add a Text Link inside the “button-wrapper” DIV and give it the same class as the buy button… then add a combo-class, say, “button-hover-effect”.
-
Duplicate the Text Link text to match that of the buy button. And URL etc…
-
Set the position of the Text Link to “Absolute” with a z-index higher than the buy button and position it over the buy button.
-
Create the hover effect / transition eases etc for the Text Link element.
I hope this can help someone.
Cheers.