How to add a mouse hover property in style sheet in qt designer widgets

[John R]

Hello,

How to add a mouse hover property in style sheet in qt designer widgets

I trying to do a mouse over property on my push buttons using CSS but I am not getting!!

When my mouse move over a button then its background should turn to white. For this I have done following in Qt designer

Right click button -> Change Style Sheet -> Added below code

background-color:red;

border-width:1px;

pushButton_30:hover { color: white };

After pressing Apply, I have gone to check Form -> Preview..

There is no white col or appearing in the button back ground!!! Why??

could anyone please help me

[sneubert]

Hi John R,

first of all some general information on stylesheets. If you add a stylesheet to a widget it applies to the widget and all child widgets. You can write properties like background-color directly in the stylesheet of a widget, but it´s good pratice to tell the widget type and object name you want to apply to and add the stylesheet to your centralWidget.

QPushButton
{
   background-color:red;
}

This catches all widgets of type QPushButton. To catch only a specific object you add the object name to the stylesheet.

QPushButton#quit_button
{
   background-color:red;
}

To solve your problem to catch a state of an object, you have to write the state behind the widget type.

QPushButton:hover
{
   background-color:white;
}

The syntax with an object name is

QPushButton:hover#quit_button
{
   background-color:white;
}

[John R]

@sneubert ,

Thanks a lot it works really nice to me, great help!!!!!