title: How to cover Row with MouseArea?
body: <p>Why does not the  <code>MouseArea</code> cover the whole <code>item_row</code> component in my example? If it did , then the <code>Pane</code> would become red when putting the mouse over it. I want the <code>MouseArea</code> to cover the whole <code>Row</code>, so when I put the mouse over the blue square or the labels, the whole pane becomes red, but right now it works only on the empty space. How should I do it?</p>
  
  <p>This is the code, runs with <code>qmlscene</code></p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  import QtQuick.Layouts 1.0
  
  ApplicationWindow {
      visible: true
      width: 640
      height: 680
      title: qsTr("Hello World")
  
      StackView {
          anchors.fill: parent
          Pane {
              id: item_pane
              anchors.top: parent.top
              anchors.left: parent.left
              anchors.right: parent.right
              contentHeight: parent.height
              Row {
                  id: item_row
                  Rectangle  {
                      color: "blue"
                      antialiasing: true
                      width: 150
                      height: 150
                  }
                  Pane {
                      background: Rectangle {
                          color: "transparent"
                      }
                      Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                      ColumnLayout {
                          Label {
                              text: "Some data"
                              Layout.alignment: Qt.AlignHCenter
                              font.bold: true
                          }
                          Grid {
                              Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                              columns: 2
                              rows: 3
                              Label {
                                  text: "Field1:"
                                  Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                              }
                              Label {
                                  text: "1 sec"
                                  Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                              }
                              Label {
                                  text: "Field 2"
                              }
                              Label {
                                  text: "30 kg"
                              }
                              Label {
                                  text: "Field 3"
                              }
                              Label {
                                  text: "30 years"
                              }
                          }
                      }
                  }
                  MouseArea {
                      id: mouse_area
                      hoverEnabled: true
                      //anchors.fill: parent
                      onEntered: {
                          item_pane.background.color="red"
                      }
                      onExited: {
                         item_pane.background.color="#ffffff"
                      }
                  }
                  Component.onCompleted: {
                      mouse_area.x=item_row.x
                      mouse_area.y=item_row.y
                      mouse_area.width=item_row.width
                      mouse_area.height=item_row.height
                      console.log("x="+item_row.x+",y="+item_row.y+"width=" + item_row.width +",height="+item_row.height)
                  }
              }
          }
      }
  }
  </code></pre>