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



  • 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



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


  • @sneubert ,

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.