Opacity
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這意味著將opacity設為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用。它也將響應用戶交互。元素和它所有的內容會被讀屏軟件閱讀，就像網頁上的其他元素那樣。
<!--html代碼-->
<div>1</div>
<div class="ohide">2</div>
/*CSS代碼*/
div {
padding: 60px;
width: 60px;
font-size: 3em;
background: pink;
text-align: center;
margin: 1%;
display: inline-block;
float: left;
cursor: pointer;
font-family: 'Lato';
}
.ohide {
opacity: 0;
transition: all ease 0.8s;
}
.ohide:hover {
opacity: 1;
}
當你的鼠標移到被隱藏的第 2 個的區塊上，元素狀態平滑地從完全透明過渡到完全不透明。區塊也將cursor屬性設置為了pointer，這說明了用戶可以與它交互。
演示
Visibility
visibility的值設為hidden將隱藏元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏。
<!--html代碼-->
<div>1</div>
<div class="ohide"><p>2</p></div>
/*CSS代碼*/
div {
padding: 60px;
width: 60px;
font-size: 3em;
background: pink;
text-align: center;
margin: 1%;
display: inline-block;
float: left;
cursor: pointer;
font-family: 'Lato';
}
.ohide {
visibility: hidden;
transition: all ease 0.8s;
}
.ohide:hover {
visibility: visible;
}
.ohide p {
visibility: visible;
margin: 0;
padding: 0;
}
//js代碼
var oHide = document.querySelector(".ohide");
var oHideP = document.querySelector(".ohide p");
var count = oHideP.innerHTML;
oHide.addEventListener("click", function(){
count++;
oHideP.innerHTML = count;
});
演示
- 如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。
- hover 在隱藏元素上，不要 hover 在p標簽里的數字上，你會發現你的鼠標光標沒有變成手指頭的樣子。此時，你點擊鼠標，你的 click 事件也不會被觸發。
- 而在 div 標簽里面的 p 標簽可以捕獲所有的鼠標事件。一旦你的鼠標移動到文字上，<div>本身變得可見并且點擊事件也隨之生效。
Display
display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。display設為none，任何對該元素交互操作都不能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。任何這個元素的子孫元素也會被同時隱藏。為這個元素添加過渡動畫是無效的，它的任何不同狀態值之間的切換總是會立即生效。
- 不過請注意，通過 DOM 依然可以訪問到這個元素。因此你可以通過 DOM 來操作它，就像操作其他的元素。
<!--html代碼-->
<div id="o-hover">Hover</div>
<div id="o-hide"><p>0</p></div>
/*CSS代碼*/
div {
height: 60px;
padding: 60px 0;
width: 180px;
font-size: 2em;
line-height: 60px;
background: pink;
text-align: center;
margin: 1%;
display: block;
float: left;
cursor: pointer;
font-family: 'Lato';
}
#o-hide {
display: none;
transition: all ease 0.8s;
}
#o-hide:hover {
display: block;
}
#o-hide p {
display: block;
margin: 0;
padding: 0;
}
//js代碼
var count = 0;
var oHide = document.getElementById("o-hide");
var oHover = document.getElementById("o-hover");
oHover.addEventListener("mouseover", function(){
count++;
oHide.innerHTML = '<p>' + count + '</p>';
});
oHover.addEventListener("click", function(){
oHide.style.display = "block";
});
演示
- 第二個 div 內有一個 p 元素，它自己的display屬性被設置成block，但是它依然不可見。這是visibility:hidden和display:none的另一個不同之處。在前一個例子里，將任何子孫元素visibility顯式設置成visible可以讓它變得可見，但是在這個例子中，只要祖先元素的display設置為none，子元素就都不可見。
- 將鼠標移到第一個 div 上面幾次，然后點擊它。這個操作將讓第二個 div 顯現出來，它其中的數字將是一個大于 0 的數。這是因為，元素即使被這樣設置成對用戶隱藏，還是可以通過 JavaScript 來進行操作。
Position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局， display不影響布局但又無法直接交互）。在這種情況下，你只能考慮將元素移出可視區域。這個辦法既不會影響布局，又能讓元素保持可以操作。下面是采用這種辦法的 CSS：
.o-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
這種方法的主要原理是通過將元素的top和left設置成足夠大的負數，使它在屏幕上不可見。采用這個技術的一個好處是用它隱藏的元素的內容可以被讀屏軟件讀取。
