QML how to use mouse hover together with styleData.selected

问题

I'm trying to build a simple delegate for rows in TableView. I want it to show a border in case hovered with mouse and leave a border in cases it's selected. See code below:

  Component
  {
    id: rowDelegate
    Item
    {
      height: 40

      Rectangle
      {
        id: rowRectSel
        anchors.fill: parent
        color: "grey"
        radius: 2
        opacity: 0.4
        border.width: 3;
        visible: styleData.selected
      }

      Rectangle
      {
        id: rowRect
        anchors.fill: parent
        color: "grey"
        radius: 2
        opacity: 0.4
        border.width: 1;
        visible: !styleData.selected
      }

      MouseArea
      {
        id: rowMouseA
        hoverEnabled: true
        anchors.fill: parent
        preventStealing: false
        propagateComposedEvents: true
        enabled: !styleData.selected
      }

      states:
      [
        State
        {
          name: "hover"
          when: rowMouseA.containsMouse
          PropertyChanges { target: rowRect; border.width: 2; }
        }
      ]
    }

The problem is that it doesn't show rowRectSel when MouseArea (rowMouseA) is there - somehow blocks the row to change styleData.selected property. If I remove the MouseArea or set enabled property to false the rowRectSel is visible when selected.

来源：https://stackoverflow.com/questions/36677464/qml-how-to-use-mouse-hover-together-with-styledata-selected