隐藏子菜单上的 CSS 计数器 [英] CSS counter on hidden submenu
问题描述
我正在尝试使用嵌套的
制作下拉菜单,每个 显示一个由 CSS 计数器生成的数字.
I'm trying to make a dropdown menu using nested <ul>
, every <li>
displaying a number generated with CSS Counters.
子菜单在未悬停时使用 display:none
隐藏.
Sub-menus are hidden with display:none
when not hovered.
我的问题是当元素将 display
设置为 none
时,计数器不会增加.
My problem is that counters are not incremented when an element has display
set to none
.
您是否知道可以防止这种情况发生的 CSS 属性?
Do you know a CSS property to prevent this?
如果我将 display: none
替换为 visibility: hidden
,它会起作用,但我不确定在我的菜单中使用它是否很好,是否有任何陷阱?
If I replace display: none
by visibility: hidden
, it's working but I'm not sure if it's nice to use this for my menu, are there any traps?
推荐答案
您可以通过将 font-size
设置为 0px 来模仿 display: none
(隐藏)行为这将使元素被 counter 属性计数.
You can mimick the display: none
(hidden) behavior by setting the font-size
to 0px and this would make the element be counted by the counter property.
.hidden{
font-size: 0px;
}
或者,上述更复杂的版本(由 Hashem Qolami 在评论中提到)
Or, a bit more complex version of the above (mentioned by Hashem Qolami in comments)
.hidden{
font: 0/0 a;
visibility: hidden;
}
注意: visibility: hidden
也可以,但它会在输出中留下相当于一行高度的空间.
Note: visibility: hidden
would also work but it would leave a space equivalent to the height of one line in the output.
这篇关于隐藏子菜单上的 CSS 计数器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!