How could I detect an onEntered signal on an objec

Question

When an object with a MouseArea is partially covered by another object with a MouseArea, the upper object blocks the onEntered signal from being received by the lower rectangle.

How could I get around this and make it possible for the lower object to receive onEntered at all points?

e.g. Let's say I have 2 rectangles, both with a MouseArea, and the upper rectangle covers the bottom right corner of the lower rectangle. In the following code, if the mouse enters lowerRect from the bottom right (i.e. when it is already within upperRect), lowerRect does not detect onEntered.

Rectangle {
    id: lowerRect
    x: 0
    y: 0
    width: 100
    height: 100
    color: "blue"

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: console.log("lowerRect was entered")
    }
}

Rectangle {
    id: upperRect
    x: 50
    y: 50
    width: 100
    height: 100
    color: "green"
    opacity: 0.8

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: console.log("upperRect was entered")
    }
}

Answer 1

• Get the mouseX & mouseY properties of the upper rectangle's MouseArea
• Check if they lie within the bounds of the lower rectangle(You must take into account x, y, width and height of the lower rectangle).

Note: onEntered() only tracks the mouse position when the mouse pointer comes inside the QML component. It will not be emitted at certain times when the rectangles overlap. So write your logic using the onPositionChanged() signal.