Html 如果“显示”属性之前设置为“无”，则CSS悬停不适用于chrome中的相邻选择器

我的页面中有3个div“按钮””、“启用按钮””和一个“工具提示”。默认情况下，我为“按钮”设置了显示：无

单击“启用按钮”div，“按钮”的显示属性将变为块。 我有一些CSS的定义，使工具提示div的显示块鼠标在按钮上。我使用相邻选择器（+）和：hover pseudo selector使相邻的“tooltip”div可见

我的问题是鼠标在chrome中的按钮上没有显示工具提示。它在firefox中正常工作。有人能帮忙吗？。提前谢谢

HTML:

Javascript:

$("#enableButton").click(function(){
    $("#button").show();    
});

代码在这里

单击单击以启用按钮使按钮首先可见，然后将鼠标悬停在按钮上以获取问题

---

在firefox上，工具提示显示正确

我恐怕没有解释，但我有一个解决方案

添加CSS：

#button {
    cursor:pointer;
    height:0;
    width:0;
    overflow:hidden;
}
#button.enabled {
    height:auto;
    width:auto;
    overflow:auto;
}

然后将jQuery更改为：

$("#enableButton").click(function () {
    $("#button").toggleClass('enabled');
});

设置：

    height:0;
    width:0;
    overflow:hidden;

---

模拟

显示的效果：无这似乎是导致Chrome出现问题的原因。
已启用
类然后将其重置为默认值，从而使按钮在应用该类时显示。
谢谢，伙计，这起作用了……但是我正在寻找一个带有display:none的解决方案。
$("#enableButton").click(function () {
    $("#button").toggleClass('enabled');
});

    height:0;
    width:0;
    overflow:hidden;