如何创建隐藏元素以及内联块

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