：hover = children show（）

Question

实现这一目标：https://jsfiddle.net/7uuybqbo/

＆＃13;

＆＃13;

var Stuffs= {
'a':{
    '1':{
        'I':'someSTRING',
        'II':'someSTRING',
        'III':someBOOLEAN,
        'IV':[
            ['IVa','someSTRING'],
            ['IVb',someINTEGER],
            ['IVc',someINTEGER],],
        'V':{
            'Va':someINTEGER,
            'Vb':someINTEGER},
        'VI':someINTEGER},
    '2':{
        'I':'someSTRING',
        'II':'someSTRING',
        'III':someBOOLEAN,
        'IV':[
            ['IVa','someSTRING'],
            ['IVb',someINTEGER],],
        'V':{
            'Va':someINTEGER,
            'Vb':someINTEGER},
        'VI':someINTEGER},
},
'b':{},
'c':{}};
function saveII(Stuff_to_save){
    Stuffs['a']['1']['II'] = Stuff_to_save;
    //This code works until the page is refreshed.
}

＆＃13;

#p1 {
 display: none;
}

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

＆＃13;

＆＃13;

＆＃13;

我的挣扎：尽可能使用少量代码，这样可以实现此次尝试中显示的多个页面的结果：https://jsfiddle.net/7tw03cyj/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前谢谢你;）

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将它用于多个实例：

.hide {
    display: none;
}

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