Mouse over/hover highlighting of combo list items

[Bob64]

With the default ComboBox, the currently selected item is highlighted when the popup list is shown. I would like to implement in addition some visual feedback when the mouse passes over each item of the open popup list as is common for selectable items in many GUIs. In particular it would highlight the item you are about to select. This would be similar to the current selected item highlighting but be a different colour.

I don't think there is a way to do this without customising the popup at least. Even then it is not clear. I did try following the customisation guide from the docs for this, and added my own popup based on ListView, but I could not see a way to implement the hover behaviour without a MouseArea over the ListView. The problem then is that the MouseArea seems to interfere with the normal behaviour of the ComboBox.

Am I missing anything straightforward here or am I on the right lines with the approach I outlined?

[Bob64]

OK, so I think it is more straightforward.

I was thinking that I had to customise both the popup and the delegate. The delegate defines the items shown in the popup list.

However, what I had missed was, that the delegate is defined (as demonstrated in the customisation docs) using an ItemDelegate. This is essentially a button Control and therefore supports hovering out of the box. So it was as simple as adding the following and not needing a custom popup:

ComboBox {
     ...
     delegate: ItemDelegate {
         ...
         hoverEnabled: true           // <<<<
         contextItem: Text { ... }
         background: Rectangle {
             anchors.fill: parent
             color: {
                  // Use `hovered` in logic for background colour
                  index  === control.currentIndex 
                      ? "blue" : (hovered ? "yellow" : "white")
        }
        ...
    }
    ...
}