There are lots of trick to achieve this goal :
First, we use the onEntered, onExited signal of MouseArea to change the hover's opacity :
ListView {
id: viewer
width: 100
height: 300
model: 10
delegate : viewerDelegate
}
Component {
id: viewerDelegate
Item {
width: 100
height: 30
Rectangle {
id: hoverFocusLightRect
anchors.fill: parent
color: "#lalala"
opacity: 0
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
hoverFocusLightRect.opacity = 0.6;
}
onExited: {
hoverFocusLightRect.opacity = 0;
}
}
Text {
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: index
}
}
}
Second, we use onPositionChanged instead of onEntered :
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPositionChanged: {
hoverFocusLightRect.opacity = 0.6;
}
onExited: {
hoverFocusLightRect.opacity = 0;
}
}
Both of these are ok, but if we press on one item , and leave the click on the other one, the onExited signal on pressed item won't be trigger, so the hover won't disappear.
The better method is to just use one boolean variant to enabled the hover effect :
ListView {
id: viewer
property bool enabledHover: false
width: 100
height: 300
model: 10
delegate : viewerDelegate
}
Component {
id: viewerDelegate
Item {
width: 100
height: 30
Rectangle {
id: hoverFocusLightRect
anchors.fill: parent
color: "#lalala"
opacity: viewer.enabledHover ? 0.6 : 0
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPositionChanged: { (or onEntered)
viewer.enabledHover = true;
}}
Text {
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: index
}
}
}
So the hover effect will display correctly, and the weird thing that show more than one hover will be disappear.
