Mouse area overlapping

143U

I have a sequence of option button on clicking which it should get highlighted and display a list. so basically there are two mouse areas one for highlighting and the other for displayin the list of options.

The former mouse area gets replaced with the latter and hence on clicking the option button only the list displays and there is no highlighting done.

Can you help me with this.

hhartz

It would be great if you could include the code you've written for this so others can assist you more easily. One tip however, to 'debug' your mouse area's you can put a transparent rectangle inside so you can more easily see the hit-area they enable;

@MouseArea {
// ...
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: "red"
border.width: 1
}
}@

puelocesar

I'm having this problem too. Here's the code:

@ImagemHover {
nome: "buscar"
anchors.horizontalCenter: bola.horizontalCenter
anchors.bottom: bola.bottom
anchors.bottomMargin: -20
}

Bola {
id: bola
color: "gray"
width: 128; height: 128
anchors.centerIn: parent
imagem: "img/fotos/eu.jpg"

MouseArea {
    anchors.fill: parent
    anchors.margins: -25
    hoverEnabled: true

    onEntered: { bola_hover = true }
    onExited: { bola_hover = false }
}

}@

And here's the code for the ImagemHover:

@import Qt 4.7

Image {
property string nome: "buscar"
source: "img/"+ nome +"_normal.png"

opacity: bola_hover ? 1 : 0
Behavior on opacity { PropertyAnimation {} }

Image {
    id: hover
    source: "img/"+ nome +"_hover.png"
    opacity: 0
    Behavior on opacity { PropertyAnimation {} }
}

MouseArea {
    anchors.fill: parent
    hoverEnabled: true

    onEntered: { hover.opacity = 1 }
    onExited: { hover.opacity = 0 }
}

}
@

As you can see, the ImagemHover is under Bola, so it's mouse area isn't having effect, because Bola's MouseArea is over it..

How can I work with this overlapping problem?

DenisKormalev

puelocesar, as I know there is no solution now for overlapping mouse areas, but I think changing z-order of items will help you in your case.

puelocesar

I need to change a little ImageHover logic, but now it's working. Thanks

DenisKormalev

puelocesar, you've changed z-order or you have done something other? If second it will be good if you can post the solution

puelocesar

My problem was: I have a circle, and when the circle mouse overs, a set of options appear above the circle.

So, when I moused over the Circle, I set the options opacity to 1, showing them. And when I moused over one of the options, that were inside the circle, the option would change it's color to orange.

But the mouse area's of the options and the circle were overlapping, so it wasn't working.

The solution was to put the Circle's MouseArea under the options (z-order), and adding the logic that was only on circle's mousearea inside the options mouseareas. So the overlapping wasn't a problem anymore.

Is this making any sense? it was very difficult to explain that without drawing :P

puelocesar

Resuming, I changed the z order of the circle, and changed this on ImagemHover:

@import Qt 4.7

Image {
property string nome: "buscar"
property bool hover: false
source: "img/"+ nome +"_normal.png"

opacity: bola_hover ? 1 : 0
Behavior on opacity { PropertyAnimation {} }

Image {
    id: hover
    source: "img/"+ nome +"_hover.png"
    opacity: 0
    Behavior on opacity { PropertyAnimation {} }
}

MouseArea {
    anchors.fill: parent
    hoverEnabled: true

    onEntered: { hover.opacity = 1; bola_hover = true }
    onExited: { hover.opacity = 0; bola_hover = false }
}

}
@

DenisKormalev

puelocesar, it makes sense :)

kyleplattner

has anyone ever documented the double mouse area problem to nokia?

DenisKormalev

kyleplattner, yes, it was discussed somewhere here at DevNet.

hhartz

But was it logged as a bug report? Please do so or assume it remains lost and undiscovered :)

kyleplattner

Filed as (QTCREATORBUG-3303).

anselmolsm

For the sake of completeness, link to the bug report. Now it is "QTBUG-15900":http://bugreports.qt.nokia.com/browse/QTBUG-15900