How to Trigger properties if another object is overlapped ?

EatonCode

I have a blue rectangle that turns yellow when hovered, then I have 4 smaller red rectangles over the blue rectangle

I want the red rectangles to turn pink when hovered, but I also want the original blue rectangle to turn yellow if the mouse is over any part of the blue rectangle.

I am using the standard Qt Creator Empty Project with Qt Quick 2.0

alt text

BlueBox.qml


import QtQuick 2.0

Item {
    property int bbWidth:100
    property int bbHeight:100
    property int bbX:0
    property int bbY:0


    Rectangle {
        id: blueBox
        width:bbWidth
        height:bbHeight
        color: "blue"
        x: bbX
        y: bbY


        Rectangle {
            id: colorYellow
            width: parent.width
            height: parent.height
            color: "yellow"
            visible: false
        }



        MouseArea {
            width: parent.width
            height: parent.height


            hoverEnabled: true

            onEntered: {
                colorYellow.visible = true
            }
            onExited: {
                colorYellow.visible = false
            }
        }
    }


}

RedBox.qml

import QtQuick 2.0

Item {
        property int rbWidth:100
        property int rbHeight:100
        property int rbX:0
        property int rbY:0

        Rectangle {
            id:redBox
            width:rbWidth
            height:rbHeight
            color: "red"
            x: rbX
            y: rbY
            border.color: "black"
            border.width: 1


            Rectangle {
                id: colorGreen
                width: parent.width
                height: parent.height
                color: "Green"
                border.color: "black"
                border.width: 1
                visible: false
            }



            MouseArea {
                width: parent.width
                height: parent.height


                hoverEnabled: true

                onEntered: {
                    colorGreen.visible = true
                }
                onExited: {
                    colorGreen.visible = false
                }
            }
        }


    }

main.qml

import QtQuick 2.10
import QtQuick.Window 2.10

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    BlueBox {
        id: testBlueBox1

        bbHeight: 100
        bbWidth: 382
        bbX: 50
        bbY: 50

        RedBox {
          id: testRedBox1
           rbHeight: 90
           rbWidth: 90
           rbX:56
           rbY:56

           MouseArea {
               hoverEnabled: true
               onEntered: {
                   //How to set testBlueBox1 to yellow
               }
               onExited: {
                   //How to set testBlueBox1 back to BlueBox
                   //Is there anyway to keep box yellow until the
                   //mouse is not physically over the testBlueBox1
               }
           }
        }

        RedBox {
          id: testRedBox2
           rbHeight: 90
           rbWidth: 90
           rbX:150
           rbY:56

        }

        RedBox {
          id: testRedBox3
           rbHeight: 90
           rbWidth: 90
           rbX:244
           rbY:56

        }

        RedBox {
          id: testRedBox4
           rbHeight: 90
           rbWidth: 90
           rbX:338
           rbY:56

        }
    }


    BlueBox {
        id: testBlueBox2

        bbHeight: 100
        bbWidth:382
        bbX: 50
        bbY: 200
    }
}

Here is the problem in a video format of the issue.

http://take.ms/gID5f

Is this a limit of QML or can this be done?

EatonCode

I think I may have figured it out... Maybe someone else will have a better idea.

I created a global property by declaring the property in main.qml

property bool vTest: false

alt text

in BlueBox.qml I changed the code as shown.

alt text

in the RedBox.qml

I made these changes...
alt text

Here is final result... it's not perfect if you take it really slow it works, but if you move your mouse to fast the blue box does not come back unless you make sure you deliberate mouse out on the larger square.

http://take.ms/PzNRq