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

    }@


  • Moderators

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

    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.