Child item in negative z receives hover

import QtQuick 2.4

Rectangle {
    id: root
    width: 1920
    height: 1080
    color: "yellow"

    MouseArea {
        objectName: "red"
        x: 200
        y: 200
        width: 400
        height: 400
        hoverEnabled: true
        onEntered: red.color = "orange"
        onExited: red.color = "red"

        Rectangle {
            id: red
            objectName: "redRect"
            anchors.fill: parent
            color: "red"
        }

        MouseArea {
            objectName: "blue"
            z: -1
            x: 100
            y: 100
            width: 400
            height: 400
            hoverEnabled: true
            onEntered: blue.color = "steelblue"
            onExited: blue.color = "blue"

            Rectangle {
                id: blue
                objectName: "blueRect"
                anchors.fill: parent
                color: "blue"
            }

            MouseArea {
                objectName: "white"
                z: 1
                x: 100
                y: 100
                width: 400
                height: 400
                hoverEnabled: true
                onEntered: white.color = "gray"
                onExited: white.color = "white"

                Rectangle {
                    id: white
                    objectName: "whiteRect"
                    anchors.fill: parent
                    color: "white"
                }
            }
        }
    }
}

import QtQuick 2.4

Rectangle {
    id: root
    width: 1920
    height: 1080
    color: "yellow"

    MouseArea {
        objectName: "red"
        z: 2
        x: 200
        y: 200
        width: 400
        height: 400
        hoverEnabled: true
        onEntered: red.color = "orange"
        onExited: red.color = "red"

        Rectangle {
            id: red
            objectName: "redRect"
            anchors.fill: parent
            color: "red"
        }
    }

    MouseArea {
        objectName: "blue"
        z: 0
        x: 300
        y: 300
        width: 400
        height: 400
        hoverEnabled: true
        onEntered: blue.color = "steelblue"
        onExited: blue.color = "blue"

        Rectangle {
            id: blue
            objectName: "blueRect"
            anchors.fill: parent
            color: "blue"
        }
    }

    MouseArea {
        objectName: "white"
        z: 1
        x: 400
        y: 400
        width: 400
        height: 400
        hoverEnabled: true
        onEntered: white.color = "gray"
        onExited: white.color = "white"

        Rectangle {
            id: white
            objectName: "whiteRect"
            anchors.fill: parent
            color: "white"
        }
    }
}