I got some code here:
<html>
<head>
<title>Select View</title>
</head>
<body class="class-1 class-2 class-3 class-4 class-5 class-6">
Many divs here
...
...
...
<div id="test">
<p>PHP code here</p>
</div>
</body>
</html>
And I want to hide the div with the test id. My site is based on wordpress, so in css I have to refer to a specific body.
I tried:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
color: red;
}
and the color is working, "PHP code here" is on red color, but when i do this:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
all site dissapears.
Any ideas how to hide only this div?
Just use what you have already
div#test{
display: none;
}
When you called body.class-1, .class-2, .class-3, .class-4, .class-5, and set display: none, it is the expected behaviour, because you are hiding all elements rather than just the test div!
Since you don't repeat the id in other elements you can just use,
#test {
display: none;
}
Just in-case if you have another element (ex: span) with the same id you have to specifically mention that you need to hide the div element with id=test
div#test {
display: none;
}
It is always a good thing to uniquely mark your elements if possible. Since you are dealing with classes if you just mention one class it will select the matching element.
In the below case you used your selection is the whole body,
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
This might be the same case if you just use the below code,
.class-1 {
display: none; //class-1 supposed to pick the whole body here;
}
Related
How can I hide/remove the "Category:" text here without touching what is inside <span> </span>?
<h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>
Thanks in advance.
Edit: I missed the important detail below. As another answer might have noticed, trying something like display: none and display: initial isn't going to work.
How can I hide/remove the "Category:" text
The initial CSS keyword can be applied to children to reset styles. As the doc mentions, sometimes initial has unexpected results, check out its peers inherit, unset, and revert. To give an example using text color:
h1 {
color: red;
visibility: hidden;
}
h1 > span {
color: initial;
visibility: initial;
}
<h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>
You could change visibility to hidden or font-size to zero on parent and reset it on the child. Without attaching any styles to the child, it's not possible with css.
If it's possible to use JS, try this:
$("h1").contents().filter(function(){
return (this.nodeType == 3);
}).remove();
<h1>Category:<span>Men</span></h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or, with CSS only:
h1 {
font-size: 0px;
visibility: hidden;
}
h1 span {
font-size: 36px;
visibility: initial;
}
<h1>Category:<span>Men</span></h1>
I'm making a plugin that dynamically generates a container on any page.
Because there might be some predefined rules that change the appearance of the contents inside my .my-plugin, so I set
.my-plugin * {
all: inital;
}
to the <style> tag inside of it.
But somehow it makes the <style> tag visible:
/* The style that from the page, which is uncertain */
h1 {
color: red;
}
<h1>This is red</h1>
<!-- dynamically injected code -->
<div class="my-plugin">
<style>
.my-plugin * {
/* reset everything to default state */
all: initial;
}
.my-plugin {
border: solid 1px black;
}
</style>
<h1>This is not red</h1>
</div>
How do I set everything inside a tag back to their initial states?
I know I can do something like .my-plugin style { display: none; }, but what about other tags that should not be invisible as well?
Ultimately I just don't want the h1 inside .my-plugin to be red.
Is there a better approach?
initial for display is inline for all elements which obviously includes style elements. This overrides the display:none style applied by the user-agent style sheet.
To get the styles as they were before the author styles start being applied, what you really want is { all: revert; } but the browser compatibility is not good yet.
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
The HTML code
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="hidden">Hello World</h1>
</body>
</html>
The CSS code
.shown {
display: hidden;
}
When this code is run the heading is still displayed. Why is this happening. I thought the display value of hidden would hid the element from the normal flow of the page.
hidden is not a valid value for display, you are after none. Also, your class name is incorrect, it should be .hidden
.hidden{
display: none;
}
Also, there is another property called visibility that also hides content with visibility: hidden. The difference is display makes it appear as the element has been removed completely from the page, whereas visibility makes the content disappear, but the space the element occupies is still respected.
Actually you have messed up the values of two different CSS attributes i.e. visibility and display.
display
.class_name
{
display:none;
}
Setting the display as none causes the object not to be visible and along with that the space required by the object is not alloted i.e. the invisible object doesn't occupy any space.
visibility
.class_name
{
visibility:hidden;
}
Setting the visibility as hidden causes the object not to be visible but the space required by the object is alloted i.e. it occupies the space it requires although it's not visible.
Reference
you have wrong class try this
<h1 class="shown">Hello World</h1>
and css
.shown {
display: none;
}
Use
.hidden{
display: none;
}
Use
.shown {
display: none;
}
or
.shown {
visibility: hidden;
}
First of all your css tag name is mismatching to your HTML code. And your CSS is wrong as well.
You could either write display: none or visibility: hidden.
I have this html code
<div id="mybox"> aaaaaaa </div>
and this is my css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code
I think I should put some code under #mybox:hover but I don't know the code.
Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;
IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.
Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.
Here is the simplest way to do it with CSS3:
#mybox:hover {
color: transparent;
}
regardless of the container color you can make the text color transparent on hover.
http://caniuse.com/#feat=css3-colors
Cheers! :)
Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.
If you only want to hide the element but retain the space occupied by it, you should use:
#mybox:hover {
visibility: hidden;
}
If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:
#mybox:hover {
display: none;
}
Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:
document.getElementById('mybox').className = 'hide';
and define the "hide" class in CSS:
.hide { display: none; }
sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.
You could make the text color the same as the background color:
#mybox:hover
{
background-color: red;
color: red;
}
What about opacity
#mybox:hover {
opacity: 0;
}
Best way to hide in html/css using display:none;
Example
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
This is a late answer but still, guess setting the color to transparent is the best option.
#mybox:hover{
background-color:red;
}
There are many ways to do it:
One way:
#mybox:hover {
display:none;
}
Another way:
#mybox:hover {
visibility: hidden;
}
Or you could just do:
#mybox:hover {
background:transparent;
color:transparent;
}
#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }
though it should be noted that IE6 and below wont listen to the hover when it's not on an A tag. For that you have to incorporate JavaScript to add a class to the div during the hover.
I would say:
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}
<div id="mybox">
This text will disappear on hover
</div>
This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well
Sorry to be 7 years late but this could be achieved by using the below:
.your-block{
visibility: hidden;
width: 0px;
height: 0px;
}
This will keep the content on the page and won't occupy any space whereas display:none will completely hide the content.
Using the above code can be useful if you need to reference code in a div but don't need it to display.
.button {
width: 40px;
height: 40px;
font-size: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%;
}
<button class="button">Поиск</button>