How to use mouse hover in a gradient
-
This is my code, when i use mouse hover in this rectangle i cant able to get hover properties in my output. Now what is my question is when i use gradient in the rectangle property why i am unable to get mouse hover. Is there any possibiliteis if so please someone help.
Thanks in advance.
@ Rectangle{
x:50
y:200
width:100
height:100
radius: 10
smooth:true
color: "black"border.width: 2 border.color: "#3c40f7" gradient: Gradient { GradientStop{position: 0.0;color: "#323336"} GradientStop{position: 0.5;color: "black"} } Image { anchors.centerIn: parent height:50 width: 50 id: img1 source: "/home/dinesh/Desktop/Screens/win7_wifi.png" } MouseArea{ id:mouse1 anchors.fill: parent hoverEnabled: true onEntered: "red" onExited: "black" }
}@
-
Hi,
@
onEntered: "red"
onExited: "black"
@is wrong. You should assign an id to the Rectangle and then
@
Rectangle {
id: rect
...MouseArea {
...
onEntered: rect.color = "red"
onExited: rect.color = "black"
}
}
@Also the gradient is overlapping over the Rectangle's background but it should not create a problem for the hoverevents. To test it try to output a log message using console.log in onEntered and onExited handlers.
-
Welcome to the forum. You are setting the size as 100x100. But your y position is 200. So you may not be seeing the changes at all.
If you want to check with different gradient, you can try the following.
@Rectangle {
...
MouseArea{
id:mouse1
anchors.fill: parent
hoverEnabled: true
onEntered: {
console.log("Red")
tops.gradient = grad2
}
onExited: {
tops.gradient = grad1
console.log("Black")
}
}Gradient { id : grad1 GradientStop{position: 0.0;color: "#323336"} GradientStop{position: 0.5;color: "#888888"} } Gradient { id : grad2 GradientStop{position: 0.5;color: "#323336"} GradientStop{position: 0.0;color: "#888888"} }
}@