finally getting the hover down with color changing

Main.qml

@@ -40,31 +40,45 @@ Window {
             delegate: Item {
                 id: listItem
                 height: 20
-                width: 100
+                width: 400
 
                 property bool hovered: false
                 required property string name
-
+                property bool isConnected: false
-                Rectangle {
-                    anchors.fill: parent
-                    color: hovered ? "blue" : "transparent"
-
-                    Text {
-                        text: listItem.name
-                        color: listItem.hovered ? "white" : "black"
-                    }
 
                 MouseArea {
                     anchors.fill: parent
                     hoverEnabled: true
-                        onEntered: listItem.hovered = true
+                    onEntered: {
+                        console.log("on hover")
+                        listItem.hovered = true
+                    }
                     onExited: listItem.hovered = false
                     onClicked: console.log("Clicked!")
-                    }
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: listItem.hovered ? "blue" : "transparent"
 
                         transitions: Transition {
                             ColorAnimation { target: parent; property: "color"; duration: 200 }
                         }
+
+                        RowLayout {
+                            anchors.fill: parent
+
+                            Text {
+                                Layout.fillWidth: true
+                                text: listItem.name
+                                color: listItem.hovered ? "white" : "black"
+                            }
+                            Button {
+                                visible: !listItem.isConnected
+                                text: "Connect"
+                                onClicked: console.log("connecting to " + listItem.name)
+                            }
+                        }
+                    }
                 }
             }
         }