隐藏子菜单上的CSS计数器 [英] CSS counter on hidden submenu

问题描述

我正在尝试使用嵌套的<ul>创建一个下拉菜单，每个<li>都会显示使用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属性计数. /p>

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;
}

演示2

注意: 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屋！