如何創建隱藏元素以及內聯塊

Question

我有一個div，我想既是內聯塊又不顯示，但我必須選擇其中一個。

我的HTML：

.like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    display:none;
}

使用JavaScript隱藏div並不是一個好主意

Answer 1

只需使用visibility: hidden;

#like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    visibility: hidden;
}

^{請注意，這是使用自定義的ID（ # ...），而不是一個類（ . ...）}

如果您希望在某些時候變得可見，則可以將此JavaScript屬性與該ID一起使用：

document.getElementById('like_user_wrapper').style.visibility='visible';

這可以包含在onmouseover=""或javascript函數等中，因此它會在您需要時顯示。 這可以在html中實現，如下所示：

<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    visibility: hidden;
}
#hover {
    width: 80px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>

在能見度CSS屬性的幫助頁面在這里

NB在大多數瀏覽器中，默認情況下，DIV具有顯示屬性block ，因此您可能不需要inline-block - 您可以將其包裝在具有該屬性的<div> 。

Answer 2

如果你試圖使用jQuery隱藏和顯示元素，要顯示它，避免使用jQuery.show() 。

而是做$('.like_user_wrapper').css({'display': 'inline-block'}); 顯示元素。

另一方面，要隱藏它就可以只做$('.like_user_wrapper').hide();

並從您的CSS中刪除display: inline-block 。

如何創建隱藏元素以及內聯塊

問題描述

2 個解決方案

解決方案1
3 2014-02-22 21:46:23

解決方案2
0 2014-02-22 21:50:11

如何創建隱藏元素以及內聯塊

問題描述

2 個解決方案

解決方案1 3 2014-02-22 21:46:23

解決方案2 0 2014-02-22 21:50:11

解決方案1
3 2014-02-22 21:46:23

解決方案2
0 2014-02-22 21:50:11