css - Is there a way to create a hover effect in Shopify using style tags?

I'm in the process of trying a build a hover effect for a custom announcement banner made within Shopify. Unfortunately, I don't feel familiar enough with Liquid to start tearing into the code until I can get the result I want.

So far, I've added code in at an attempt to add a hover effect and have found limited success. I've been able to shift the alignment of the text and add some padding when the hover-effect (a checkbox in the schema) is turned on. I'm trying to be able to change the background and text color while hovering to make it a little more interactive, but haven't been able to get anything to work.

Is it possible for me to add this in within the tags in the liquid file, or do I need to take a different approach?

**note: any additional resources anyone has about learning liquid to help build custom effects would be appreciated!!

<style>
{% if section.settings.hover-effect %}
   .custom-announcement-bar:hover {

    /* below are the only effects I have been able to get work. i need to change 
    the background color, text color, and potentially an outline effect and 
    animated transition*/

    padding: 20px;
    text-align: left !important;
   }
{% endif %}
</style>
Copy code

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.