How to include child mouse hover events in the parent MouseArea using QML?

Question

I want to implement the following scenario in QML.

Here is a sample/simplified delegate for ListView element:

Component {
    Item {
         id: container
         MouseArea {
         anchors.fill: parent
         hoverEnabled: true

         onClicked: {
             container.ListView.view.currentIndex = index
             container.forceActiveFocus();
         }
         onEntered: {
             actionList.state = "SHOW";
             myItem.state = "HOVER"
         }
         onExited: {
             actionList.state = "HIDE";
             myItem.state = "NORMAL"
         }
         Rectangle {
             id: myItem
             color: "gray"
             anchors.fill: parent
             Row {
                 id: actionList
                 spacing: 5; anchors.fill: parent
                 Image {
                     id: helpAction
                     source: ""    //Some image address
                     width: 16; height: 16; fillMode: Image.PreserveAspectFit
                     states: [
                         State {
                             name: "NORMAL"
                             PropertyChanges { target: helpAction; opacity: 0.7 }
                         },
                         State {
                             name: "HOVER"
                             PropertyChanges { target: helpAction; opacity: 1.0 }
                         }
                     ]
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent

                         onEntered: {
                             parent.state = "HOVER";
                         }
                         onExited: {
                             parent.state = "NORMAL";
                         }
                     }
                     states: [
                         State {
                             name: "SHOW"
                             PropertyChanges { target: actionList; visible: false }
                         },
                         State {
                             name: "HIDE"
                             PropertyChanges { target: actionList; visible: true }
                         }
                     ]
                 }

                 //Other action buttons...

                 states: [
                     // `NORMAL` and `HOVER` states definition here...
                 ]
             }
         }
    }
}

But I have a problem with MouseArea.
Inner MouseArea (actionButton) does not work properly for entered event. When mouse enters on action button, outer MouseArea fires exited event.

Is there any mistake in my code? More generally, how can I implement such a scenario in QML?

Answer 1

I was faced by this same problem, and came across the answer in the QtQuick 5.0 documentation for MouseArea. The answer to this is actually quite simple.

If you want to include child mouse hover events in your parent MouseArea, make you child MouseArea a child of the parent MouseArea:

MouseArea {
    id: parent

    MouseArea {
        id: child
    }
}

Since I have a custom Widget type that would be used as the parent view, I ended up with the default property being the children of the MouseArea:

Item {
    default property alias children: mouseArea.data

    MouseArea {
        id: mouseArea
    }
}