Question

So I try:

   Rectangle {
       x: 617
       y: 450
   Image {
      id: rect
      source:  "buttons/GO/GO!-norm.png"
      smooth: true
      opacity: 1
      MouseArea {
          id: mouseArea
          anchors.fill: parent
          hoverEnabled: true         //this line will enable mouseArea.containsMouse
          onClicked: Qt.quit()
      }

      states:  [
           State {
               name: "mouse-over"; when: mouseArea.containsMouse
               PropertyChanges { target: rect; scale: 0.95; opacity: 0; }
               PropertyChanges { target: rect2; scale: 0.95; opacity: 1}
               PropertyChanges { target: rect3; scale: 0.95; opacity: 0}
           },

            State {
               name: "mouse-down"; when: mouseArea.pressedButtons
               PropertyChanges { target: rect; scale: 0.95; opacity: 0; }
               PropertyChanges { target: rect2; scale: 0.95; opacity: 0}
               PropertyChanges { target: rect3; scale: 0.95; opacity: 1}
           }
       ]

       transitions: Transition {
           NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 500  }
       }
   }

   Image {
      id: rect2
      source:  "buttons/GO/GO!-over.png"
      smooth: true
      opacity: 0
      anchors.fill: rect

     }

   Image {
      id: rect3
      source:  "buttons/GO/GO!-down.png"
      smooth: true
      opacity: 0
      anchors.fill: rect

     }
   }

but it works only in over\out states… How to make my button have 3 states?

Answer 1

I’m not entirely sure if this is what happens but it’s possible: When you mouseover the image, its opacity gets set to 0. The documentation says that:

1. Changing opacity affects also the child items of the Item.
2. If an item’s opacity is set to 0, the item will no longer receive mouse events.

Thus, when you mouseover, the rect.opacity is set to 0, mouseArea stops receiving mouse events and the mouseArea.pressedButtons condition is never fulfilled. You can probably avoid this by making mouseArea a sibling of the Image and not its child item. Use an Item or Rectangle as the parent item.