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

John R

Hello,

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!!!!!