Change hover state on my button

MaximBozek

Hi, I am trying to change the border color of my button when I hover over it. Got this but its not working:

        Rectangle {
            id: loaded_button
            width: 300
            height: 200
            color: mecs_blue
            radius: 10

            border.color: "transparent"
            border.width: 4

            Image {
                source: "assets/Icons/truck_loaded.png"
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
                width: 200
            }

            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    load_loaded()
                    active_button = "loaded"
                }

                onHoveredChanged: {
                    if (mouseArea.containsMouse) {
                        loaded_button.border.color = mecs_green
                    }
                    else {
                        loaded_button.border.color = "transparent"
                    }
                }
            }
        }

Bob64

@MaximBozek I think you need to set hoverEnabled on the MouseArea.

Also, the way you have done this is a bit more complicated than it needs to be. Rather than explicitly reassigning values in response to an event, in QML it is better to look for ways to do things in a more declarative and "reactive" way. For example (untested, but based on your code):

Rectangle {
            id: loaded_button
            width: 300
            height: 200
            color: mecs_blue
            radius: 10

            border.color: mouseArea.hovered ? mecs_green : "transparent" // <<<
            border.width: 4

            Image {
                source: "assets/Icons/truck_loaded.png"
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
                width: 200
            }

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true       // <<<<
                // DELETE onHoveredChanged handler
                ...
            }
        }

MaximBozek

ok did this, but doesn't do anything either, don't you need to set some parameters to make the hover do what you want it to?

Bob64

@MaximBozek said in Change hover state on my button:

ok did this, but doesn't do anything either, don't you need to set some parameters to make the hover do what you want it to?

Did you make the change in Rectangle that I suggested? That is how to communicate that the hover state should affect the border colour.

Otherwise, maybe try simplifying your code down the minimum possible and, if you still can't make it work, post it here.

GrecKo

You could use a Button instead. It has a clicked signal and a hovered property already.
You can display an image on it by customizing the contentItem.
Customized the background color by changing the color or use a custom background Rectangle