Html div元素中的文本将忽略CSS3动画控件。我做错了什么？_Html_Css

Html div元素中的文本将忽略CSS3动画控件。我做错了什么？

html css

Html div元素中的文本将忽略CSS3动画控件。我做错了什么？,html,css,Html,Css,我有一个非常简单的菜单，我正在努力工作-然而，虽然我有基本的动画，但动画div中的子内容并没有隐藏。这是纯CSS3，如果可以的话，我会尽量避免jQuery。它使用复选框hack作为一个假按钮来触发菜单在此状态下，菜单被隐藏，但内容文本仍清晰显示。文本应该与包含它的div一起隐藏 HTML: 菜单是在标准HTML5模板中编写的，带有为了保持一致性，但看起来Chrome样式表可能会覆盖一切。然而，同样的问题也出现在Firefox和Opera中为了隐藏菜单中的内容，当动画处于“关闭”状态？

我有一个非常简单的菜单，我正在努力工作-然而，虽然我有基本的动画，但动画div中的子内容并没有隐藏。这是纯CSS3，如果可以的话，我会尽量避免jQuery。它使用复选框hack作为一个假按钮来触发菜单

在此状态下，菜单被隐藏，但内容文本仍清晰显示。文本应该与包含它的div一起隐藏

HTML:

菜单是在标准HTML5模板中编写的，带有为了保持一致性，但看起来Chrome样式表可能会覆盖一切。然而，同样的问题也出现在Firefox和Opera中

为了隐藏菜单中的内容，当

动画处于“关闭”状态？

您可以使用

display:block

display:none

属性，而不是使用

height

但是，您可以使用

可见性

属性在此处实现所需的功能

请参阅随附代码：

.exTooltip标签{
背景色：#000；
宽度：32px；
高度：32px；
光标：指针；
显示：内联块；
}
.IP输入{
显示：无；
}
.Extoltip输入~#exMC{
高度：0px；
可见性：隐藏；
/*显示：无*/
}
.Extoltip输入：选中~#exMC{
身高：97%；
能见度：可见；
/*显示：块*/
}
#exMC{
位置：固定；
宽度：160px；
背景色：#5656；
-webkit过渡：所有0.30秒都可以轻松过渡；
-moz转换：所有0.30秒都会变慢；
-o型过渡：所有0.30秒均缓解；
过渡：所有0.30秒都放松；
}


试验

-那-似乎已经做到了！我一直在尝试各种组合的显示：和其他。我没想到要尝试那个特殊的控制。

<body>
<input type="checkbox" value="selected" id="exCheckBoxID" class="exTooltip-input">
<label for="exCheckBoxID" class="exTooltip-Label exTooltipTopLeft"></label> 


<div id="exMC" class="exMC-TopLeftPosition">
    Test
</div>

.exTooltip-Label {
  background-color: #000;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-block;
}

.exTooltip-input {
    display: none;
}

.exTooltip-input:not(checked) ~ #exMC {
    height: 0px;
}

.exTooltip-input:checked ~ #exMC {   
    height: 97%;
}

#exMC {
    position: fixed;
    width: 160px;
    background-color: #565656;  
    -webkit-transition : all 0.30s ease-out;
    -moz-transition : all 0.30s ease-out;
    -o-transition : all 0.30s ease-out;
     transition : all 0.30s ease-out;   
}