# Using Field to specifiy CSS attributes for Pseudo-classes

**URL:** <https://community.hubspot.com/t/using-field-to-specifiy-css-attributes-for-pseudo-classes/40921>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [July 19, 2021, 8:27am UTC](https://community.hubspot.com/t/using-field-to-specifiy-css-attributes-for-pseudo-classes/40921 "2021-07-19T08:27:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![HaNguyen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hanguyen/32/47584_2.png) [@HaNguyen](https://community.hubspot.com/u/HaNguyen)\
**Post date:** [July 19, 2021, 8:27am UTC](https://community.hubspot.com/t/using-field-to-specifiy-css-attributes-for-pseudo-classes/40921/1 "2021-07-19T08:27:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [July 19, 2021, 1:29pm UTC](https://community.hubspot.com/t/using-field-to-specifiy-css-attributes-for-pseudo-classes/40921/2 "2021-07-19T13:29:02Z")

</div>

Hi @HaNguyen,

Did you check the documentation for the [modules](https://developers.hubspot.com/docs/cms/building-blocks/modules/files). You can use the ‘[require\_css](https://developers.hubspot.com/docs/cms/building-blocks/modules/files#require-css-block)’ for better handeling your css. Your css will need to be added to the ‘Hubl+HTML’ section.

When using the [color field](https://developers.hubspot.com/en/docs/cms/building-blocks/module-theme-fields#color), it will return multiple values.

```lia-code-sample
.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.

```lia-code-sample
{% 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.

```lia-code-sample
{% 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.

```lia-code-sample
{% 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.

---

<div class="post-metadata">

**Author:** ![HaNguyen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hanguyen/32/47584_2.png) [@HaNguyen](https://community.hubspot.com/u/HaNguyen)\
**Post date:** [July 19, 2021, 2:07pm UTC](https://community.hubspot.com/t/using-field-to-specifiy-css-attributes-for-pseudo-classes/40921/3 "2021-07-19T14:07:17Z")

</div>

Thank you for the solution!