qq_35742333
害羞的蛆
2019-09-05 23:58
采纳率: 80%
浏览 1.4k

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

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • weixin_45471782
    前端_小菜鸟 2019-09-06 10:08
    已采纳

    可以将这段代码

    #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绑定在图片上,这样就可以做到显示隐藏了

    点赞 评论
  • qq_40021323
    妖王令剑 2019-09-06 10:03

    你现在是div做了隐藏(#list>ol>li>div), hover的时候这个div也要显示啊,

    #list>ol>li>div:hover,#list>ol>li>div:hover img{
                display:block;
    }
    
    点赞 评论

相关推荐