In Qt, when I define a hover image using css, it does not work

Question

I have a toolbar with several QPushButton's. They trigger display modes, and only one mode can be used at a time : when mode1 is activated, mode2, mode3, etc, are deactivated.

When one mode is activated, an "activated icon" is displayed on the corresponding button, and all other buttons display a "not activated" icon. Each button has a different icon.

Now, I'd like the icon to change when the mouse is over a button to indicate the user can click (a hover mode basically, mostly to keep the design consistency in our application).

Here is what I did so far, but it does not work as I would expect : the hover icon is not shown (I just put 2 buttons to simplify).

toolbar.h


#ifndef TOOLBAR_H
#define TOOLBAR_H

#include <QWidget>

namespace Ui {
    class Toolbar;
}

class Toolbar : public QWidget
{
   Q_OBJECT

public:
    explicit Toolbar(QWidget *parent = nullptr);

private slots:
    void on_mode1button_clicked(bool);
    void on_mode2button_clicked(bool);

private:
   Ui::Toolbar * ui;
};

#endif

toolbar.cpp

#include "toolbar.h"
#include "ui_toolbar.h"

Toolbar::Toolbar(QWidget *parent) : QWidget(parent)
{
    ui->setupUi(this);

    ui->mode1Button->setObjectName("mode1");
    ui->mode2Button->setObjectName("mode2");
    on_mode1button_clicked(true);
}

void Toolbar::on_mode1button_clicked(bool)
{
    ui->mode1button->setIcon(QIcon("icon1_activated.png"));
    ui->mode2button->setIcon(QIcon("icon2.png"));
    // do all the stuff to actually change the display mode...
}

void on_mode2button_clicked(bool)
{
    ui->mode2button->setIcon(QIcon("icon2_activated.png"));
    ui->mode1button->setIcon(QIcon("icon1.png"));
    // do all the stuff to actually change the display mode...
}

style.css

QPushButton#mode1, #mode2
{
    background-color: none;
    border:none;
}

QPushButton#mode1:hover
{
    image: url(icon1_hover.png);
}

QPushButton#mode2:hover
{
    image: url(icon2_hover.png);
}

The hover icon is not displayed on mouse over, and I don't understand what I did wrong. Is it possible to solve this using only css?

Take a look: https://stackoverflow.com/questions/19161119/using-hover-and-pressed-stylesheet-qt — Leo Chapiro, Oct 25 '19 at 13:23
@duDE Sorry, but I don't understand how combining states can solve my problem. Can you please provide an example? — R0m1, Oct 25 '19 at 13:34
No, I can't. I have only found the example that looked promising. If it not helped, I#m sorry. — Leo Chapiro, Oct 25 '19 at 13:41
Try add `ui->mode1Button->setAttribute(Qt::WA_MouseTracking, true);` into your code. This should allow Qt to notice when cursor is actually above your button. — Alexander Zavertan, Oct 25 '19 at 16:45

In Qt, when I define a hover image using css, it does not work

0 Answers0