MouseArea内Button悬浮状态同步问题：悬停Button时两者均保持悬浮

问题出在Button内部自带独立的MouseArea，当鼠标移至Button上时，父级MouseArea会判定鼠标已离开自身区域，触发exited信号，导致Rectangle的悬浮状态失效。以下是两种可行的解决思路：

方法一：绑定父MouseArea与子Button的鼠标状态 #

直接将Rectangle的悬浮状态绑定为父MouseArea包含鼠标或Button包含鼠标的逻辑或，只要任意一个条件成立，就保持悬浮样式。

修改后的代码：

Window {
    visible: true
    minimumWidth: 600
    minimumHeight: 320

    Rectangle
    {
        id: idRec1
        width: 200
        height: 200
        // 直接绑定两个控件的鼠标状态
        color: (mouseArea.containsMouse || btn.containsMouse) ? Qt.lighter("red", 1.5) :"red"
        anchors.centerIn: parent

        MouseArea
        {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled:true
            // 不需要再手动设置itemHovered，直接用containsMouse属性
        }

        Button
        {
            id: btn
            anchors.centerIn: parent
            text: "Button"
            // 确保Button自身的悬浮状态正常（可选，根据需求调整）
            hoverEnabled: true
        }
    }
}

方法二：监听Button的悬浮信号同步状态 #

如果需要保留原有的itemHovered属性逻辑，可以通过监听Button的entered和exited信号，同步更新Rectangle的悬浮状态：

修改后的代码：

Window {
    visible: true
    minimumWidth: 600
    minimumHeight: 320

    Rectangle
    {
        id: idRec1
        width: 200
        height: 200
        color: itemHovered ? Qt.lighter("red", 1.5) :"red"
        anchors.centerIn: parent

        property bool itemHovered: false

        MouseArea
        {
            anchors.fill: parent
            hoverEnabled:true

            onEntered: idRec1.itemHovered = true
            onExited: {
                // 退出时检查Button是否处于悬浮状态，若Button有鼠标则不取消
                if(!btn.containsMouse) idRec1.itemHovered = false
            }
        }

        Button
        {
            id: btn
            anchors.centerIn: parent
            text: "Button"
            hoverEnabled: true

            onEntered: idRec1.itemHovered = true
            onExited: {
                // Button退出时检查父MouseArea是否还有鼠标，若没有则取消
                if(!mouseArea.containsMouse) idRec1.itemHovered = false
            }
        }
    }
}

关键说明 #

• containsMouse是QML MouseArea（以及启用了hoverEnabled的Item）的内置属性，用于判断当前是否有鼠标悬停在控件范围内。
• Button默认启用了hoverEnabled，可以直接使用其containsMouse属性或entered/exited信号。
• 第一种方法更简洁，直接通过属性绑定实现状态联动，推荐使用。

内容的提问来源于stack exchange，提问作者Ali