Change font weight with linked child interactions

[designerken]

I have a button within a posts element that has child interactions enabled. I was hoping to change the font weight of the button to be set to 700 when the interaction is triggered on the hover state of the post element.

Is this possible?

[prakash_s]

Hello @designerken,

Thanks for writing to us.

Regretfully there is no option for that but you can achieve it by using the custom CSS code. I would suggest you go to the Button Element —>Customize —>Element CSS.

$el.x-anchor .x-anchor-text-primary:hover {
    font-weight: 700;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[designerken]

Hi @prakash_s

I am aware of how to target the element with CSS using the :hover psuedo selector. I was using this code so the button text gets bold when the button container is hovered over:

$el.x-anchor:hover .x-anchor-text-primary { font-weight: 700; }

However, adding this code will not achieve the linking effect with child interactions enabled mentioned in my original post.

[designerken]

I have it solved:

I added my own custom attribute data-effect-provider="hover" to the Post column.

Then added the following CSS on the button element:

[data-effect-provider*="hover"]:hover .x-anchor .x-anchor-text-primary {
  font-weight: 700;
}

[prakash_s]

Hello @designerken,

Glad that you were able to fix it. Please feel free to open a new thread if you have any more concerns.

Thanks