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

Qt / QML 5.8 support for mouse over



  • 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.


  • Moderators

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



  • 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.



  • 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.


  • Moderators

    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



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


  • Moderators

    @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;
            }
        }
    


  • 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.


  • Moderators

    @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



  • Thank you.


Log in to reply