CSS event to modify another css class

[former_member349352]

Hi Experts

I am facing an odd issue in CSS. I am trying to hover over button1 and see button 2 change its color. But with my CSS its not happening.

Please see CSS code used below.

I have researched through many question on SCN and blogs.

https://archive.sap.com/discussions/thread/3570065

I am following css written in the link about.

.button1{ background-color:#005092 !important; color:red !important; }

.button2 { background-color:#005092 !important; color:white !important; }

.button1:hover { background-color:#005092 !important; color:green !important; }

.button1:hover .button2 { background-color:red !important; color:blue !important; }

[TammyPowlas]

Which version of Design Studio are you using?

[TammyPowlas]

Also there are more options listed here, in Karol's response: https://archive.sap.com/discussions/thread/3647769

[former_member349352]

Hi Tammy

I am using 16.1.2 version.

Thanks for sharing Karol's response to similar question. But in my case I am trying to hover over button 1 and want to see the class properties of button 2 to change.

.button1:hover .button2 { background-color:red !important; color:blue !important; } --> This line is CSS is not working.

Regards

[former_member349352]

Hi Vidhya

Thank for your reply. Hover over buttons work fine, but i am trying to hover over button 1 and want change color on button 2 (with out hovering over button 2)

Thanks

Ashok

[former_member349352]

Hi Nithyanandam

I tried all there codes below and none of them worked.

.button1:hover +.button2 {background-color:red!important;color:blue!important;}

.button1:hover ~.button2 { background-color:red !important; color:blue !important; }

.button1:hover>.button2 { background-color:red !important; color:blue !important; }

[former_member194504]

Hi,

Can you try this CSS

.button1{ background-color:#005092 !important; color:red !important; }
.button2 { background-color:#005092 !important; color:white !important; }
.button1:hover { background-color:#005092 !important; color:green !important; }
.button1:hover + .button2 { background-color:red !important; color:blue !important; }

Thanks,

Nithyanandam

[former_member349352]

Hi Vidhya

Thank you for your reply. Hover over a single button is working fine. But I am trying to hover over button 1 and modify class of button 2 (without hovering over button 2).

Thanks

Ashok

[Vidhya]

Hi Ashok,

Please update your CSS, using below code,

.button1{ background-color:#005092 !important; color:red !important; }

.button2{ background-color:#005092 !important; color:white !important; }

.button1:hover { background-color:#005092 !important; color:green !important; }

.button2:hover { background-color:red !important; color:blue !important; }

I have tested, now it is working fine. Please check and let me know.

Regards,

Vidhya.C

[former_member349352]

I am using 16.1.2 version.

Thanks for sharing Karol's response to similar question. But in my case I am trying to hover over button 1 and want to see the class properties of button 2 to change.

.button1:hover .button2 { background-color:red !important; color:blue !important; } --> This line is CSS is not working.

Regards

[TammyPowlas]

Have you debugged it using F12 (assuming you are using Chrome?