title: How to include child mouse hover events in the parent MouseArea using QML?
body: <p>I want to implement the following scenario in QML.  </p>
  
  <p><img src="https://i.stack.imgur.com/icFIK.png" alt="Scenario"></p>
  
  <p><br/>
  Here is a sample/simplified delegate for <code>ListView</code> element:  </p>
  
  <pre><code>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...
                   ]
               }
           }
      }
  }
  </code></pre>
  
  <p>But I have a problem with <code>MouseArea</code>.<br>
  Inner <code>MouseArea</code> (actionButton) does not work properly for <code>entered</code> event. When mouse enters on action button, outer <code>MouseArea</code> fires <code>exited</code> event.  </p>
  
  <p>Is there any mistake in my code? More generally, how can I implement such a scenario in QML?</p>