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

Question

I have a div and I want to be both inline-block and display none, but I have to choose one of them. 我有一个div，我想既是内联块又不显示，但我必须选择其中一个。

My HTML: 我的HTML：

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

It's not a good idea to have the div just hide using JavaScript 使用JavaScript隐藏div并不是一个好主意

Answer 1

Just use visibility: hidden; 只需使用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;
}

^{Note this is using a custom ID ( # ...) , not a class ( . ...)} ^{请注意，这是使用自定义的ID（ # ...），而不是一个类（ . ...）}

If you want is to become visible at some point, you can use this JavaScript property with that ID: 如果您希望在某些时候变得可见，则可以将此JavaScript属性与该ID一起使用：

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

This can be included in a onmouseover="" , or a javascript function etc, so it appears when you want it to. 这可以包含在onmouseover=""或javascript函数等中，因此它会在您需要时显示。 This can be implemented in html like this : 这可以在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>

Help page on the visibility CSS property here 在能见度CSS属性的帮助页面在这里

NB In most browsers, by default a DIV has the display property block , so you might not need inline-block - you could just wrap it in a <div> with that property anyway. NB在大多数浏览器中，默认情况下，DIV具有显示属性block ，因此您可能不需要inline-block - 您可以将其包装在具有该属性的<div> 。

Answer 2

If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show() . 如果你试图使用jQuery隐藏和显示元素，要显示它，避免使用jQuery.show() 。

Instead do $('.like_user_wrapper').css({'display': 'inline-block'}); 而是做$('.like_user_wrapper').css({'display': 'inline-block'}); to display the element. 显示元素。

On the other hand, to hide it is ok to just do $('.like_user_wrapper').hide(); 另一方面，要隐藏它就可以只做$('.like_user_wrapper').hide();

And remove the display: inline-block from your css. 并从您的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