css设置dispay:none;后无法使用display:block;恢复显示

Question

CSS部分代码如下:
初学前端,希望大佬指点一下下 - -

#list>ol>li>div{
    position: absolute;
    width: 990px;
    height: 460px;
    top: 0px;
    left: 202px;
    display: none;
}
#list>ol>li>div:hover img{
    display: block;/*想要让图片,在我放到盒子上时就显示出来*/
    /*先显示图片,再在这里使用none隐藏,可以成功隐藏图片*/
}

HTML部分代码如下

            <div id="list">
                    <ol>
                        <li>
                            手机&nbsp;&nbsp;电话卡
                            <div id="body_lefthidden_Img1">
                            <img src="这里是图片地址" />
                            </div>
                        </li>
                        <li>电视&nbsp;&nbsp;盒子</li>
                    </ol>
                </div>

Answer 1

可以将这段代码

#list>ol>li>div:hover img{
    display: block;/*想要让图片,在我放到盒子上时就显示出来*/
    /*先显示图片,再在这里使用none隐藏,可以成功隐藏图片*/
}
改成下面的
#list>ol>li:hover div {
            display: block;
        }

你本身就把图片包围的div 给了display:none 这时候你去 悬浮给div里面的img display:block是没有用的,因为它外层 父级都已经是display:none 所以要么你把悬浮的css写在img外层的div上,或者下面的代码这样

#list>ol>li>div>img{
    position: absolute;
    width: 990px;
    height: 460px;
    top: 0px;
    left: 202px;
    display: none;
}
#list>ol>li>div:hover img{
    display: block;/*想要让图片,在我放到盒子上时就显示出来*/
    /*先显示图片,再在这里使用none隐藏,可以成功隐藏图片*/
}

绑定同一个,图片display:none,就把悬浮的css绑定在图片上,这样就可以做到显示隐藏了