我通过数据绑定禁用了一个按钮。在运行时，该按钮是灰色的。当用户将光标悬停在按钮的非文本区域上时，该按钮将作为禁用按钮-用户无法单击它。但是，如果用户将光标悬停在按钮中的文本标签上，则可以单击它。为什么？

<div class="flextable-item">
            <div class="btn-toolbar dashhead-toolbar float-left">
                <a href="@Url.Action("Edit", "VendorManagement", new { area = "Vendor" })/@Model.Id">
                    <button type="button" class="btn btn-primary-outline" data-bind="enable: EnableDetail">
                        <span class="icon icon-pencil" > Edit</span>
                    </button>
                </a>
            </div>
        </div>