我的页面中有 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 上工具提示正确显示
最佳答案
恐怕我没有解释,但我有解决办法。
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
类随后将这些重置为其默认值,导致按钮在应用该类时显示。
关于html - 如果显示属性之前未设置,则 CSS 悬停不适用于 chrome 中的相邻选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23657242/