Simple QT hover effects

{0 Comments}

I really love QT but sometimes im a bit disappointed because of the lack of easy to use graphic effects. This short tutorial will show you how to polish up your application with some simple lines of code.

The goal

For my latest projetct I wanted to have simple image buttons which change their picture when the mouse gets over them and change back when the mouse leaves the area of the button.

So this will be the goal:

How to do it

The easiest way to show pictures in QT is to use a label with a html text like

It is a good idea to use *.png picture since they can have a transparent background.

So create a layout for your application and place a label where you want to have the picture.
Then set the image for this label when your app is loading:

Now to catch all the events  from your icon you will need an event filter in your main application class. This event filter will catch all events which may appear for the label (like clicked, dragged, dropped and so on).

So in the header file for your application class create a new private function called


Then you also add the function in your main code file:

As you can see the code is really simple. When the event QEvent::Enter appears the mouse has moved over the icon and the picture gets changed. The same vice versa for the event QEvent::Leave where the picture is set to its origninal state.
When you click on the picture you should see the string „icon clicked“ in your QT console so this event filter lets you handle click events too.
I hope this helps you to build up some nice applications so have fun developing.

Leave a Comment

Your email address will not be published.