How to change a property of a object in QML upon a hover?

Question

I have rectangle object and I need to change the background color of it when hovered. How can I do this? I tried this but didn't work

        Rectangle {
                            id: section1
                            color: "#293645"
                            radius: 10
                            anchors.fill: parent
                            anchors.rightMargin: 20
                            anchors.leftMargin: 20
                            anchors.bottomMargin: 25
                            anchors.topMargin: 25

                            MouseArea {
                                hoverEnabled: true
                                onEntered: {
                                    section1.color = "red"
                                }
                 }

Answer 1

Just set MouseArea anchor.fill property to solve your problem.

Rectangle {
    id: section1
    color: "#293645"
    radius: 10
    anchors.fill: parent
    anchors.rightMargin: 20
    anchors.leftMargin: 20
    anchors.bottomMargin: 25
    anchors.topMargin: 25
    
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            section1.color = "red"
        }
    }
}