how to create a hidden element as well as inline-block
Question
I have a div and I want to be both inline-block and display none, but I have to choose one of them.
My 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
2 answers
solution1
3 2014-02-22 21:46:23
Just use 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 ( . ...)
If you want is to become visible at some point, you can use this JavaScript property with that 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. This can be implemented in 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>
Help page on the visibility CSS property here
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.
solution2
0 2014-02-22 21:50:11
If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show() .
Instead do $('.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();
And remove the display: inline-block from your css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.