Hello, I want to "hide" control area when mouse is not there, but if I do it this way:

Qt Code: 
  1. import QtQuick 2.3
  2. import QtQuick.Window 2.2
  3. import QtMultimedia 5.0
  4. import QtQuick.Controls 1.4
  5. import QtQuick.Layouts 1.0
  6. import QtQuick.Dialogs 1.2
  7. import QtQuick.Extras 1.4
  8.  
  9. Window {
  10.     id: mainArea
  11.     visible: true
  12.     minimumWidth: 1200
  13.     minimumHeight: 720
  14.     color: "white"
  15.  
  16.     Rectangle {
  17.         id: controlArea
  18.         anchors.bottom: parent.bottom
  19.         anchors.horizontalCenter: parent.horizontalCenter
  20.         anchors.bottomMargin: 0
  21.         width: 400
  22.         height: 50
  23.         opacity: 0.40
  24.         color: "lightgray"
  25.         radius: 10
  26.  
  27.         RowLayout {
  28.             anchors.centerIn: parent
  29.             ToolButton {
  30.                 text: "test"
  31.             }
  32.  
  33.         }
  34.         MouseArea {
  35.             z: 100
  36.             anchors.fill: parent
  37.             hoverEnabled:true
  38.             onEntered: {
  39.                 console.log("ENTERED toolbar mousearea");
  40.                 controlArea.opacity = 0.40
  41.             }
  42.             onExited: {
  43.                 console.log("EXITED toolbar mousearea");
  44.                 controlArea.opacity = 0.0
  45.             }
  46.  
  47.         }
  48.  
  49.     }
  50.  
  51. }
To copy to clipboard, switch view to plain text mode 

button doesn't work, so I tried adjusting it with this:

Qt Code: 
  1. import QtQuick 2.3
  2. import QtQuick.Window 2.2
  3. import QtMultimedia 5.0
  4. import QtQuick.Controls 1.4
  5. import QtQuick.Layouts 1.0
  6. import QtQuick.Dialogs 1.2
  7. import QtQuick.Extras 1.4
  8.  
  9. Window {
  10.     id: mainArea
  11.     visible: true
  12.     minimumWidth: 1200
  13.     minimumHeight: 720
  14.     color: "white"
  15.  
  16.     Rectangle {
  17.         id: controlArea
  18.         anchors.bottom: parent.bottom
  19.         anchors.horizontalCenter: parent.horizontalCenter
  20.         anchors.bottomMargin: 0
  21.         width: 400
  22.         height: 50
  23.         opacity: 0.40
  24.         color: "lightgray"
  25.         radius: 10
  26.  
  27.  
  28.         RowLayout {
  29.             anchors.centerIn: parent
  30.             ToolButton {
  31.                 text: "test"
  32.             }
  33.             z: 99
  34.             MouseArea {
  35.                 anchors.fill: parent
  36.                 acceptedButtons: Qt.RightButton
  37.                 onClicked: {
  38.                     console.log("right button was clicked");
  39.                 }
  40.             }
  41.         }
  42.         MouseArea {
  43.             z: 100
  44.             anchors.fill: parent
  45.             hoverEnabled:true
  46.             onEntered: {
  47.                 console.log("ENTERED toolbar mousearea");
  48.                 controlArea.opacity = 0.40
  49.             }
  50.             onExited: {
  51.                 console.log("EXITED toolbar mousearea");
  52.                 controlArea.opacity = 0.0
  53.             }
  54.  
  55.         }
  56.  
  57.     }
  58.  
  59. }
To copy to clipboard, switch view to plain text mode 

now button works but I'm not sure this is correct way of doing what I wanted, and this "controlArea.opacity" is not supported by Qt Quick designer.