Using Field to specifiy CSS attributes for Pseudo-classes

Develop, Build & Integrate CMS Development
1

Dear Hubspot Community, as the title suggests, I would like to ask about how to pass a Field Value into CSS property only “on hover” of an element inside a custom Module. I have tried creating the Field “color_field” containing the values, using Hubl markup to create a variable such as {% set TextHoverColor = ‘{{module.color_field.color}}’ %} and assigning this variable as value of a CSS property for the said element. The Hubl Markup I have written directly inside the module’s Hubl+HTML area, while the assigning is done in a seperate Hubl+CSS file that is then linked to the module. But the desired effect is unfortunately still not achieved. Could you give me a suggestion on how this can be done ? Thank you in advance.

2

Hi @HaNguyen,

Did you check the documentation for the modules. You can use the ‘require_css’ for better handeling your css. Your css will need to be added to the ‘Hubl+HTML’ section.

When using the color field, it will return multiple values.

.color{
 color: {{ module.color_field.color }};
 opacity: {{ module.color_field.opacity }};
}

If you want to use the color for a background of just want to use the color and opacity, you can combine it like this.

{% set color = module.cta.overlay.color %}
{% set opacity = module.cta.overlay.opacity %}
{% set color_rgba = color|convert_rgb ~','~ opacity/100 %}

.color{
 color: rgba( {{ color_rgba }} );
}

So for your example, just change your css and don’t forget to use ‘require_css’ for better handeling your css.

{% set color = module.cta.overlay.color %}
{% set opacity = module.cta.overlay.opacity %}
{% set color_rgba = color|convert_rgb ~','~ opacity/100 %}

{% require_css %}
<style type="text/css">
 .color:hover{
 color: rgba( {{ color_rgba }} );
 }
</style>
{% end_require_css %}

If you are going to use this module multiple times on a page. Just add a unique ‘class’ or ‘id’ to your elements like this.

{% require_css %}
<style type="text/css">
 #{{ name }}:hover{
 color: #00000;
 }
</style>
{% end_require_css %}

<div id="{{ name }}">
 Sample text
</div>

Did this answered your question? If so, please mark as resolved. If not, please let me know.

3

Thank you for the solution!