Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QT Creator Setting Icon Image on Hover
Forum Updated to NodeBB v4.3 + New Features

QT Creator Setting Icon Image on Hover

Scheduled Pinned Locked Moved Solved General and Desktop
4 Posts 2 Posters 2.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    Radio1985
    wrote on last edited by
    #1

    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.

    2e50de8d-693b-4a56-9535-ab124654dfc1-image.png

    The icon was set using the property editor as shown below.
    35b01b79-78d4-481f-8b99-781b17995af6-image.png

    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.
    5ef9b4db-7aff-45a0-86f7-fbe13d15540b-image.png

    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.

    5aa47bc5-dffd-47dd-87ed-8b99ab4504e3-image.png

    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!

    R 1 Reply Last reply
    0
    • C Offline
      C Offline
      CPPUIX
      wrote on last edited by CPPUIX
      #3

      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.

      R 1 Reply Last reply
      0
      • R 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.

        2e50de8d-693b-4a56-9535-ab124654dfc1-image.png

        The icon was set using the property editor as shown below.
        35b01b79-78d4-481f-8b99-781b17995af6-image.png

        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.
        5ef9b4db-7aff-45a0-86f7-fbe13d15540b-image.png

        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.

        5aa47bc5-dffd-47dd-87ed-8b99ab4504e3-image.png

        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!

        R Offline
        R Offline
        Radio1985
        wrote on last edited by
        #2

        @Radio1985
        I tried out modifying the stylesheet as below. Still it doesn't work as expected.
        1335bce3-bbc3-467b-b711-b62f905cbb2f-image.png
        d2f20fff-9b49-44d9-b063-13b0c8960af9-image.png

        But now I only see the black color icon, but I don't see the icon change when I hover on to the button.
        a4c2d54d-f4d3-4ce8-bac4-b2e594e21605-image.png

        Thanks!

        1 Reply Last reply
        0
        • C Offline
          C Offline
          CPPUIX
          wrote on last edited by CPPUIX
          #3

          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.

          R 1 Reply Last reply
          0
          • C 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.

            R Offline
            R Offline
            Radio1985
            wrote on last edited by
            #4

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

            1 Reply Last reply
            0
            • R Radio1985 has marked this topic as solved on

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved