change behavior of mouse hover

[SchneJoe]

I'm using iq-button-toggle and I would like to switch off the mouse hover function. The appearance of the button should not change. No matter if the status of the button is ON or OFF. I use this lines in a custom css file:

.iq-button-toggle.inverted:not(.locked)
.iq-button:focus,
.iq-button-toggle.inverted:not(.locked)
.iq-button:hover,
.iq-button-toggle:not(.locked)
.iq-button:focus,
.iq-button-toggle:not(.locked)
.iq-button:hover{border-color:rgba(60,60,60,.7);background-color:inherit;color:inherit}

This works when the button is OFF. But when the button is ON and the mouse is over it, the color changes. How can I modify the css file to get the correct behavior even when the state is ON?

[webiq-sk]

I formatted your code:

.iq-button-toggle.inverted:not(.locked) .iq-button:focus,
.iq-button-toggle.inverted:not(.locked) .iq-button:hover,
.iq-button-toggle:not(.locked) .iq-button:focus,
.iq-button-toggle:not(.locked) .iq-button:hover {
    border-color:rgba(60,60,60,.7);
    background-color:inherit;
    color:inherit;
}

If you add "!important" after each of those colors it might work. or you could use more precise CSS selectors. Also see this for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 

[SchneJoe]

Thanks for the answer, but the behavior is not 100% what I expect. Normally the button is white when the status is OFF and blue when the status is ON. I want it to keep the color, wether the mouse is over the button or not. No with this settings as you suggested, the button keeps white when it is OFF (white), but it changes to white when it was ON (blue) before the mouse moves over it. Any ideas?

[HmiGuide · Accepted solution]

You can use the following workaround, for the hover problem:
- Create two stylesheets of type iq-button-toggle
- e.g. TogBut_On and TogBut_Off
- Define the color and background color e.g.

.iq-button-toggle.TogBut_Off.iq-variant-01 .iq-button {
   background-color: gray;
}
/* [Variant 01] - Toggle Button Label */
.iq-button-toggle.TogBut_Off.iq-variant-01 .iq-toggle-label {
  color: blue;
}

- Select stylesheet TogBut_On, when button is on.
- Select stylesheet TogBut_Off, when button is off.

See link for info how to change color via stylesheets: https://developer.community.boschrexroth.com/t5/Smart-HMI-WebIQ-Designer-and/Change-the-color-of-an-...

Attached you find an example created with Designer V2.11.3