Mouse area overlapping



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



  • 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
    }
    }@



  • 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?



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



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



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



  • 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



  • 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 }
    }
    

    }
    @



  • puelocesar, it makes sense :)



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



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



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



  • Filed as (QTCREATORBUG-3303).



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.