Qt / QML 5.8 support for mouse over

SPlatten

The project I'm working on is using Qt 5.8, I don't have any control over the version so I cannot switch to current or later release.

Is there anyway to detect when the mouse is over an image in this version?

I've tried implementing mouseArea it doesn't seem to be defined. I want to provide a scaling effect to the image when the mouse moves over an image.

sierdzio

You need to use containsMouse property. But remember to make hoverEnabled true first.

SPlatten

Thank you I'll give it a go, I have tried the containsMouse, but hadn't set hoverEnabled.

In my Button.qml which is the underling QML definition for the button I have:

    Component.onCompleted: {
        MouseArea.hoverEnabled = true;
    }
    scale: MouseArea.containsMouse ? 2.0 : 1.0;
    smooth: MouseArea.containsMouse

What I'm seeing in the Application Output are a lot of:

    Button.qml:21:13: Unable to assign [undefined] to bool

21 is the line containing:

    smooth: MouseArea.containsMouse

If I comment out that line, build and run, no more errors in Application Output, however the effect does not work and if I put the mouse over an image the scale is unchanged.

I can verify that setting the scale to 2.0 does double the size as I hard coded it to test. However this is not true in all cases, it seems that the buttons / images that are included in a row are not effected.

SPlatten

This is what I have now in the Button.qml:

    MouseArea {
        hoverEnabled: true
        onEntered: {
            root.scale = 2.0;
        }
        onExited: {
            root.scale = 1.0;
        }
    }

Nothing happens, I have break points in both handlers, neither of them are actioned.

J.Hilk

hi @SPlatten

you have to give your MouseArea a size, currently it has a size of 0 a anchors.fill:parent should be sufficient

also make sure to give your MouseArea an id, if you refer it outside/from somewhere else.
Something like this

Component.onCompleted: {
        MouseArea.hoverEnabled = true;
    }
    scale: MouseArea.containsMouse ? 2.0 : 1.0;
    smooth: MouseArea.containsMouse

can't work, id's always start with a lowercase character

SPlatten

If I replace MouseArea with mouseArea it underlines it in red.

J.Hilk

@SPlatten there is no default id; you have to explicitly define it

MouseArea {
       id:mouseArea
        hoverEnabled: true
        onEntered: {
            root.scale = 2.0;
        }
        onExited: {
            root.scale = 1.0;
        }
    }

SPlatten

Sorry, MouseArea is defined inside an object like this:

     Button {
         id: root
         property bool showDropShadow: true
         /* Lots of other properties... */
        MouseArea {
            hoverEnabled: true
            anchors: fill.parent
            /*on handlers */
        }
        /* The rest of the button definition... */
    }

Does MouseArea require its own id ?
Incidentally the anchors is a new addition after reading your post, it causes an application crash.

J.Hilk

@SPlatten

anchors.fill:parent and anchors: fill.parent do you spot the difference ? ;)

Does MouseArea require its own id ?

only if you want to access functions/properties outside the {} scope

SPlatten

Thank you.