html - 如果显示属性之前未设置，则 CSS 悬停不适用于 chrome 中的相邻选择器

Question

我的页面中有 3 个 Div“button”、“enableButton”和一个“tooltip”。默认情况下，我为“按钮”设置了display:none。

单击“enableButton”div 时，“button”的display 属性将更改为block。我有一些 CSS 定义，使工具提示 div 的显示 block 在鼠标悬停在按钮上。我将相邻选择器 (+) 与 :hover 伪选择器结合使用，使相邻的“工具提示”div 可见。

我的问题是工具提示没有显示在 chrome 中的按钮上。它在 Firefox 中正常工作。有人可以帮忙吗？提前致谢。

HTML:

<div id="enableButton">Click to Enable Button</div>
<br/>

<div  style="display:none;" id="button">Button</div>
<div class="tooltip">this is the tooltip</div>

CSS:

#enableButton{cursor:pointer; color:red;}
.tooltip{display:none; padding:5px; border:1px solid #ccc;}
#button{cursor:pointer;}
#button:hover+.tooltip{display:block;}

Javascript:

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

代码在这个fiddle

点击Click to Enable Button 使按钮首先可见，然后将鼠标悬停在按钮上以获取问题

在 firefox 上工具提示正确显示

Answer 1

恐怕我没有解释，但我有解决办法。

Demo Fiddle

添加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;

模仿 display:none; 的效果，这似乎是导致 Chrome 出现问题的原因。 enabled 类随后将这些重置为其默认值，导致按钮在应用该类时显示。