QT Creator Setting Icon Image on Hover

[Radio1985]

Hi All,
I have this button with an icon set to the button. The icon and the test menu is defined in the same QPushButton.

The icon was set using the property editor as shown below.

I have added all my icons to the asset.
Now I need to change the color of the icon from black to blue when I hover my curser on to the push button. I have a similar icon image with same size and blue color. I have added it into the assets.

I modified my stylesheet as below.

However, my final results of the application is not what I expected. I do not see my icon color changes, instead it shows an image on top of my original icon with different size.

Any idea what I am doing wrong and how can I fix this?
I simply want to change my color of the original black color icon to the blue color icon.

Thank you!

[CPPUIX]

Hi,

You might find this answer on Stack Overflow helpful:

• Change QPushButton Icon on hover and pressed

A few quotes from it:

Unfortunately, it is a bug of Qt which is still not fixed.

use C++ to change the button's icon at runtime, here's a simple example using event filter:

#include <QObject>
#include <QPushButton>
#include <QEvent>

class ButtonHoverWatcher : public QObject
{
   Q_OBJECT
public:
   explicit ButtonHoverWatcher(QObject * parent = Q_NULLPTR);
   virtual bool eventFilter(QObject * watched, QEvent * event) Q_DECL_OVERRIDE;
};

ButtonHoverWatcher::ButtonHoverWatcher(QObject * parent) :
   QObject(parent)
{}

bool ButtonHoverWatcher::eventFilter(QObject * watched, QEvent * event)
{
   QPushButton * button = qobject_cast<QPushButton*>(watched);
   if (!button) {
       return false;
   }

   if (event->type() == QEvent::Enter) {
       // The push button is hovered by mouse
       button->setIcon(QIcon(":/images/start_hov.png"));
       return true;
   }

   if (event->type() == QEvent::Leave){
       // The push button is not hovered by mouse
       button->setIcon(QIcon(":/images/start.png"));
       return true;
   }

   return false;
}

Then somewhere in your code setting up the UI you do something like this:

ButtonHoverWatcher * watcher = new ButtonHoverWatcher(this);
ui->pushButton->installEventFilter(watcher);

Quote from Igor Korot on QTBUG-2982:

Those mode icons (pressed, hoovered, focused, normal) >are not styles. Consider setting the label alignment vs. >the pressed button icon. The former is a style which will >not be changed during the lifetime of the button (creation >style), while the latter will be changed (depending >whether I click the button or not).
It is more of a missing feature that can be implemented >in the user code with the filterEvent() from the C++ code >and should be documented as such.

[Radio1985]

@Radio1985
I tried out modifying the stylesheet as below. Still it doesn't work as expected.

But now I only see the black color icon, but I don't see the icon change when I hover on to the button.

Thanks!

[CPPUIX]

Hi,

You might find this answer on Stack Overflow helpful:

• Change QPushButton Icon on hover and pressed

A few quotes from it:

Unfortunately, it is a bug of Qt which is still not fixed.

use C++ to change the button's icon at runtime, here's a simple example using event filter:

#include <QObject>
#include <QPushButton>
#include <QEvent>

class ButtonHoverWatcher : public QObject
{
   Q_OBJECT
public:
   explicit ButtonHoverWatcher(QObject * parent = Q_NULLPTR);
   virtual bool eventFilter(QObject * watched, QEvent * event) Q_DECL_OVERRIDE;
};

ButtonHoverWatcher::ButtonHoverWatcher(QObject * parent) :
   QObject(parent)
{}

bool ButtonHoverWatcher::eventFilter(QObject * watched, QEvent * event)
{
   QPushButton * button = qobject_cast<QPushButton*>(watched);
   if (!button) {
       return false;
   }

   if (event->type() == QEvent::Enter) {
       // The push button is hovered by mouse
       button->setIcon(QIcon(":/images/start_hov.png"));
       return true;
   }

   if (event->type() == QEvent::Leave){
       // The push button is not hovered by mouse
       button->setIcon(QIcon(":/images/start.png"));
       return true;
   }

   return false;
}

Then somewhere in your code setting up the UI you do something like this:

ButtonHoverWatcher * watcher = new ButtonHoverWatcher(this);
ui->pushButton->installEventFilter(watcher);

Quote from Igor Korot on QTBUG-2982:

Those mode icons (pressed, hoovered, focused, normal) >are not styles. Consider setting the label alignment vs. >the pressed button icon. The former is a style which will >not be changed during the lifetime of the button (creation >style), while the latter will be changed (depending >whether I click the button or not).
It is more of a missing feature that can be implemented >in the user code with the filterEvent() from the C++ code >and should be documented as such.

[Radio1985]

@Abderrahmene_Rayene
Thanks for the response. That was really helpful! C++ approach worked for me.