Change CSS Style an element on hovering another element
Question
Application Type
Reactive

Hello everyone,

I have two icons (named IconA & IconB), what I want is to change the CSS (color and opacity)  of IconB when hovering over IconA, is this possible?

Both Icons are on the same container, which has no name.

What I have tried on the CSS Style sheet editor:

 #IconA:hover #IconB

{

         color: green;

         opacity: .7;

}


Solution

Why not put that exception on the style class?


Next to icon class, put iconA.


And then on your style's theme. Put .iconA instead of #iconA and the same thing to the iconB

Márcio hello,

Looks like the thing you mentioned was way more easy than I thought

Thanks a lot for the help!

I think still that will not help you.

Because when you are doing .iconA:hover .iconB{ ...styles....} this will not apply any style to the iconB class.

So... the best thing to do is create this css class

.icon.active{

    color:green;

    opacity: 0.7;

}

And when you do hover on the iconA this will put at true the variable activeA true

And with this variable, it will add to the class active in case activeA(variable) is true

These variables will help you to know when you are doing hover in an icon and which one.

So the hover control will be don't inside of the SS and not on the CSS. Because that will not be possible.

Let me know what you think.

Try the link that I am sharing

https://marcio-carvalho4.outsystemscloud.com/iconcolorhover/Screen1?_ts=637659456831714325

If I could help you with my last answer, let me know what you did.

Kind Regards,

Márcio

iconcolorhover.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.