How to use mouse hover in a gradient

[Dinesh22]

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"
}

}@

[p3c0]

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.

[dheerendra]

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"}
}

}@