如何使用css隱藏元素，同時仍然保留在頁面上？

我想隱藏我的頁面上的元素，但我仍然希望它在那裏。我想要一個仍然可以點擊的按鈕，但我希望它不可見。如何使用css隱藏元素，同時仍然保留在頁面上？

2015-04-12 Jim Peeters

有三種方法來隱藏要素，並保持頁面位置。您可以獲取有關Normal flow和css樣式（即：opcity，visibility）屬性關係的更多信息。

知名度
opcity
透明

$('div').click(function(){ 
 
    alert(this.innerHTML) 
 
})

div{ 
 
    border: 1px solid #000; 
 
} 
 
.one{ 
 
    visibility:hidden; 
 
} 
 
.two{ 
 
    opacity: 0; 
 
} 
 
.three{ 
 
    background: transparent; 
 
    color: transparent; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    1 
 
    <div class="one">visibility</div> 
 
    2 
 
    <div class="two">opticy</div> 
 
    3 
 
    <div class="three">transparent</div> 
 
    4 
 
</body> 
 
</html>

來源

2015-04-12 12:11:41

只是讓你按鍵透明：

$("#invisible").click(function() { 
 
    alert("Invisible is clicked"); 
 
});

#invisible { 
 
    background: transparent; 
 
    color: transparent; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="invisible">I am invisible</button> <- Click here

來源

2015-04-12 11:04:21

只需添加一個背景/顏色：RGBA（0,0,0,0）; border：none;到CSS屬性。

來源

2015-04-12 11:09:33 Athax

你當答案只說「添加顯示：無;到CSS屬性」被downvoted。你真的*確定你不知道它爲什麼被低估？ – JJJ

@Juhana在我糾正了我的信息後，我第一次意識到自己被低估了。 – Athax

使用不透明度：0,如果您還想訪問div的子元素，您需要隱藏。

.opacityZero { 
    opacity:0; 
}

爲了澄清，3個屬性的說明如下：

能見度

使用CSS visibility屬性，您可以切換使用隱藏的價值元素的可見性或可見。如果隱藏了該元素，則該元素將對用戶隱藏，並且用戶無法訪問它的子元素，但仍然在DOM中元素的空間將被消耗。

透明度

如果使用不透明度：0隱藏的元素，它看起來像隱藏乍一看，但仍是用戶可以訪問的子元素。它也消耗DOM中元素的空間。如果你有一個鏈接作爲子元素，如果你設置不透明度爲0，它仍然是可點擊的。這是你的選擇。

顯示

如果您使用display：none，則瀏覽器會考慮彷彿元素不具備的DOM的結果也不會佔用空間。

DEMO

$(".opacityZero, .visibilityHidden").click(function() { 
 
    alert("Button is clicked"); 
 
});

.opacityZero { 
 
    opacity:0; 
 
} 
 

 
.visibilityHidden { 
 
    visibility:hidden; 
 
    margin-top:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="opacityZero"> 
 
<button >I am invisible</button> 
 
</div><span>↑ Click above (Opacity:0 - children clickable</span> 
 
    
 
<div class="visibilityHidden"> 
 
<button>I am invisible</button> 
 
</div><span>↑ Click above (Visibility hidden - children not clickable</span>

的jsfiddlehttp://jsfiddle.net/a_incarnati/gna7r4L8/6/

來源

2015-04-12 11:52:07

如何使用css隱藏元素，同時仍然保留在頁面上？

回答

相關問題