Change hover state on my button
-
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" } } } }
-
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" } } } }
@MaximBozek I think you need to set
hoverEnabled
on theMouseArea
.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 ... } }
-
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?
-
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?
@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.
-
You could use a
Button
instead. It has aclicked
signal and ahovered
property already.
You can display an image on it by customizing thecontentItem
.
Customized the background color by changing the color or use a custombackground
Rectangle