Change QPushButton Icon on hover and pressed

Question

I\'m trying to change the Icon of a QpushButton on hover and pressed, I\'m using QtDesigner with stylesheets. I tried this

QpushButton{
       qproperty-icon:ur         


        

Answer 1

I know this is an old question, but I think it may still be useful.

To get a button with only an image showing by default, then a different image on hover, I tried having an icon set in the editor and playing around with the onSelected, onActive, etc. but naturally, it didn't work.

What did work is inspired from @JosephFarrish and from @goerge so credit goes firstly to them. I decided to post my answer as a 'tangible' solution.

For the particular push button, I have 2 images:

• one shown by default

• and on for a hover effect

My solution for a specific QPushButton is:

QPushButton {
    border-image: url(:/icons/ic-explore);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

QPushButton:hover {
    border-image: url(:/icons/ic-explore-hover);
    background-repeat: no-repeat;
}

as you can see, the ic-explore and ic-explore-hover are added to my resource file as shown below:

where the actual icons are in the root project folder, in a folder named icons. The prefix for the icons is given by :/icons/ and this coincidentally happens to be the same name as the icons folder name.

Note with the CSS that I set the width and height of the QPushButton.