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;
}

让div隐藏使用JavaScript

并不是一个好主意

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 like this中实现：

<!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属性here

上的帮助页面

N.B。在大多数浏览器中，默认情况下，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 个答案: