Cursor shape changed even over an overlapping rectangle in QML - qt

Question

With the following code, the green rectangle entirely overlaps the red rectangle, but when the mouse is over the (hidden) red rectangle, my cursor shape is still changed according to the red MouseArea cursorShape.
Any idea to prevent this behavior?
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Rectangle {
color: "red"
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 100
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: "ClosedHandCursor"
}
}
Rectangle {
color: "green"
anchors.fill: parent
MouseArea {
anchors.fill: parent
hoverEnabled: true
}
}
}

Answer 1

Simply use 'containsMouse' property in the binding of cursorShape, and don't use the String form of enum values :
import QtQuick 2.0
Rectangle {
color: "white";
width: 400;
height: 400;
Rectangle {
color: "red";
anchors.top: parent.top;
anchors.left: parent.left;
width: 300;
height: 300;
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
cursorShape: (containsMouse
? (pressed
? Qt.ClosedHandCursor
: Qt.OpenHandCursor)
: Qt.ArrowCursor);
}
}
Rectangle {
color: "green";
anchors.bottom: parent.bottom;
anchors.right: parent.right;
width: 300;
height: 300;
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
}
}
}

Answer 2

import QtQuick 2.0
Rectangle {
width: 360
height: 360
Rectangle {
color: "red"
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 100
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: greenRectangle.hovered ? Qt.ArrowCursor : Qt.ClosedHandCursor;
}
}
Rectangle {
id: greenRectangle;
property bool hovered: false;
color: "green"
anchors.fill: parent
anchors.leftMargin: 20;
MouseArea {
anchors.fill: parent
hoverEnabled: true
onHoveredChanged: {
greenRectangle.hovered = !greenRectangle.hovered;
console.log(greenRectangle.hovered);
}
}
}
}