Congratulations to our 2022 Qt Champions!

qpushbutton stylesheet hover

  • what code do i use to change the image whenever i hover over a qpushbutton?


    i tried the code above it doesn't change the image when i hover the button.

  • Moderators

    Depending on how you want your image displayed you should use either QPushButton:hover{ border-image: url(:/images/OnOffArm.png) } or QPushButton:hover{ background-image: url(:/images/OnOffArm.png) }.
    If you mean the button icon then you can set it with QPushButton { qproperty-icon: url(:/images/OnOffArm.png) } but for some reason it doesn't work for the :hover state. I guess you can report a bug on that.

  • I can confirm that it's possible to do and hover is working on my side

    Here is a working example from my project:

             ui->pushButton_config->setStyleSheet("QPushButton#pushButton_config{image: url(:/image/icon/conf2);border-radius: 1px;}"
                                             "QPushButton#pushButton_config:hover{image: url(:/image/icon/conf2);border-radius: 1px;}");

    in Designer :

    /* MINIMIZE */
    QPushButton#pushButton_minimize {
    image: url(:/image/icon/min1);
    border-radius: 1px;

    QPushButton#pushButton_minimize:hover {
    image: url(:/image/icon/min2);
    border-radius: 1px;

Log in to reply