javascript - :hover = children show()

Question

实现这个:https://jsfiddle.net/7uuybqbo/

#p1 {
 display: none;
}

#page1:hover + #p1 {
  display: block;
}

<div class="pg">
            <div class="pgButton" id="page1">1</div>
            <div id="p1" class="hide">
                page 1
            </div>
        </div>

我的努力:尽可能少的代码，将实现本次尝试中显示的多个页面的结果:https://jsfiddle.net/7tw03cyj/

.hide {
            display: none;
        }
        
        .pgButton:hover + .pg > div {
            display: block;
        }

    <div class="pg">
            <div class="pgButton" id="page1">1</div>
            <div id="p1" class="hide">
                page 1
            </div>
        </div>
        <div class="pg">
            <div class="pgButton" id="page2">2</div>
            <div id="p2" class="hide">
                page 2
            </div>
        </div>

提前谢谢你；)

Answer 1

这是您要找的吗？您可以使用 .hide 属性作为限定符。

.hide {
            display: none;
        }
        
        .pgButton:hover + .hide {
            display: block;
        }

    <div class="pg">
            <div class="pgButton" id="page1">1</div>
            <div id="p1" class="hide">
                page 1
            </div>
        </div>
        <div class="pg">
            <div class="pgButton" id="page2">2</div>
            <div id="p2" class="hide">
                page 2
            </div>
        </div>