Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Transparent labels and hover



  • Hi,

    I have 4 transparent images - eggs. They have other colors: yellow, red, blue, green. This images looks like:

    egg.png

    I set two pixmaps in labels ( for example green egg and blue egg ) like this:

    prog.png

    I would like change images when hover it by mouse cursor:
    green egg <-> yellow egg
    blue gg <-> red egg
    Like this ( red X is my mouse cursor ):

    prog2.png

    I have problem, when mouse cursor is closer than blue egg:

    prog3.png

    In example above I should have yellow and blue egg. I don't get them because one egg is under the next one and areas like this:

    prog3.png

    How can I achieve what I want?

    My code now:

    #include "label.h"
    
    label::label(QPixmap outImage, QPixmap inImage, QWidget *parent): QLabel(parent), inPixmap(inImage), outPixmap(outImage)
    {
        setAttribute(Qt::WA_Hover, true);
        setPixmap(outPixmap);
    }
    
    void label::hoverEnter(QHoverEvent * event)
    {
        setPixmap(inPixmap);
    }
    void label::hoverLeave(QHoverEvent * event)
    {
        setPixmap(outPixmap);
    }
    
    bool label::event(QEvent * e)
    {
        switch(e->type())
        {
        case QEvent::HoverEnter:
            hoverEnter(static_cast<QHoverEvent*>(e));
            return true;
            break;
        case QEvent::HoverLeave:
            hoverLeave(static_cast<QHoverEvent*>(e));
            return true;
            break;
        default:
            break;
        }
        return QWidget::event(e);
    }
    

    MainWindow constructor:

        l1 = new label(QPixmap::fromImage(QImage(R"(pathToImage\green.png)")),QPixmap::fromImage(QImage(R"(pathToImage\yellow.png)")),this);
        l2 = new label(QPixmap::fromImage(QImage(R"(pathToImage\blue.png)")),QPixmap::fromImage(QImage(R"(pathToImage\red.png)")),this);
        l1->resize(QImage(R"(pathToImage\green.png)").size());
        l2->resize(QImage(R"(pathToImage\blue.png)").size());
        l1->move(20,20);
        l2->move(100,100);
    

  • Lifetime Qt Champion

    Hi
    You can use https://doc.qt.io/qt-5/qwidget.html#setMask
    "Masked widgets receive mouse events only on their visible portions."


  • Lifetime Qt Champion

    Hi
    You can use https://doc.qt.io/qt-5/qwidget.html#setMask
    "Masked widgets receive mouse events only on their visible portions."



  • @mrjj Perfect. Thank you!


Log in to reply