Skip to Content
0

CSS event to modify another css class

Jan 31, 2017 at 07:55 PM

164

avatar image
Former Member

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; }

10 |10000 characters needed characters left characters exceeded

Which version of Design Studio are you using?

0

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

0
Former Member

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

0
* Please Login or Register to Answer, Follow or Comment.

6 Answers

avatar image
Former Member Jan 31, 2017 at 09:53 PM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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

0
Vidhya V Feb 01, 2017 at 10:30 AM
0

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


Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Feb 11, 2017 at 02:22 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Feb 01, 2017 at 05:47 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Feb 02, 2017 at 05:18 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Feb 02, 2017 at 02:55 PM
0

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; }
Share
10 |10000 characters needed characters left characters exceeded