Skip to Content
avatar image
Former Member

CSS event to modify another css class

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

6 Answers

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

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 01, 2017 at 10:30 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 11, 2017 at 02:22 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 01, 2017 at 05:47 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 02, 2017 at 05:18 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 02, 2017 at 02:55 PM

    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; }
    Add comment
    10|10000 characters needed characters exceeded