Hello All,
How can we assign the dynamic background color. As I'm aware we can use the style attributes and modify the css background color dynamically but the issue is I need to call the pseudo (:hover) too.
First - I have included a css with pseudo (:hover)
Second - I have called the class in container attrubites
backgorund color which is mentioned as orange would change based on input parameter.
Regards,
Vinod
Hi Vinod,
You can use the CSS variable in the style definition and manipulate the variable value using JS accordingly.
CSS Snippet:
:root { --card-hover: orange; } .card-hover-style :hover { background-color: var(--card-hover); }
JS Snippet:
document.documentElement.style.setProperty('--card-hover', $parameters.colorCode);
Demo Screen: HoverTask
Refer to the attached om.
I hope this helps you!
Kind regards,
Benjith Sam
Hello
There is no such direct way like wise we use class in attribute of a widget, however
there is a work around or you can say this way we can do that so in reactive we can use these events below :
onmouseenter
onmouseleave
So here you can pass the dynamic value of a color and this will behave same as hover
I am attaching an oml for reference that will help you get this
https://personal-ejuytnht.outsystemscloud.com/SamplePOC_s/DynamicCSSColorChang?_ts=638152291521236763
I hope this helps
ThanksTousif Khan
From what I've seen, it seems the problem is in your CSS.
You have a space between .cardstyle and :hover. It needs to be together like .cardstyle:hover.
Hello @Vitor Oliveira,
I have a requirements to change the background color dynamically. How to achieve it.?
Hi @Vinod Kumar R
As i understood you need to change colour conditionally depends on some condition, i have also done it in one of my application, Please try to do it I hope it'll be helpful for you.
In Above image i gave CSS property and values dynamically based on condition.
This is my Style attribute for the container.
I hope it'll help you.
Thanks
Deep
This is not the issue, He is able to change the color via conditional style, The issue here is he want to change the background colour but not this way, this is already achievable if you can read the post.
He wants to change bg color on hover dynamically
@Benjith Sam & @Tousif Khan ,
Both the solution works.