/*1 (display)顯示-block/inline/inline-block, 隱藏-none, 不保留位置*/ display: block; /*2 (visibility)可視化, hidden-隱藏, visible-可視, 保留位置*/ visibility: hidden; visibility: visible; /*3 (opacity)透明度設置(位置一直都在)*/ opacity: 0;

1.visibility屬性

visibility, 常用方法, 在css樣式中可先設置visibility: hidden; 隱藏標簽, 再用偽類選擇器hover去設置visibility: visible; 顯示隱藏的內容 (visibility方法會保留原標簽的文檔流位置)
推薦使用!!!

2.opacity屬性

opacity, 本意是用來設置透明度, 當設置為opacity: 0; 時, 也具有隱藏標簽效果, 同樣, 在偽類選擇器hover中設置opacity: 1; 時則可以顯示出所隱藏的內容 (opacity方法可以理解為完全透明化, 同樣保留原標簽位置)
一般推薦!

3.display屬性

display屬性, 本意為設置標簽為行–塊元素, 但當取display: none; 時, 原有的標簽則會消失, 后面同樣可以用hover偽類選擇器去設置display: block/inline/inline-block; 去完成 隱藏–顯示效果 (因為display: none; 是完全消除標簽, 更像刪除, 所以設為none時不能保留原有標簽位置)
慎用!!

/*這里用了visibility屬性, 注釋里是display屬性*/ .hidden {position: absolute;width: 400px;height: 222px;background-color: rgba(0, 0, 0, 0.4);border-radius: 5% 5% 0 0;top: 0px;left: 0px;/*display: none;*/visibility: hidden; } .hidden h1 {text-align: center;margin-top: 80px;color: white; } /*致命點*/ .content:hover .hidden{/*display: block;*/visibility: visible; }

總結

以上是生活随笔為你收集整理的css三种标签隐藏方法(及它们用法区别), css显隐性问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。