Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Change hover state on my button
Forum Updated to NodeBB v4.3 + New Features

Change hover state on my button

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 3 Posters 429 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MaximBozek
    wrote on last edited by
    #1

    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"
                        }
                    }
                }
            }
    
    B 1 Reply Last reply
    0
    • M 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"
                          }
                      }
                  }
              }
      
      B Offline
      B Offline
      Bob64
      wrote on last edited by Bob64
      #2

      @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
                      ...
                  }
              }
      
      1 Reply Last reply
      0
      • M Offline
        M Offline
        MaximBozek
        wrote on last edited by
        #3

        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?

        B 1 Reply Last reply
        0
        • M 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?

          B Offline
          B Offline
          Bob64
          wrote on last edited by
          #4

          @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.

          1 Reply Last reply
          0
          • GrecKoG Offline
            GrecKoG Offline
            GrecKo
            Qt Champions 2018
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved