I'm trying to make parts of a list hidden when the page loads.
Specifically the sdt_wrap class of my HTML.I know that the display:hidden is in the correct spot it just is not taking in the hidden value
Here is the CSS:
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:50px;
width:170px;
height:150px;
z-index:501;
display: hidden;
}
hidden is not a valid value for display. You're looking for none, as in:
ul.sdt_menu li span.sdt_wrap{
display:none;
}
Documentation
CSS display on MDN - https://developer.mozilla.org/en/CSS/display
It's display:none or visibility:hidden. 'hidden' is not a valid value for 'display'.
use visibility:hidden; or opacity: 0; property
Related
I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.
If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>
I have a WordPress site in which we are replacing menu links with a background image. Here is an example of the css for one of the menu items.
#menu-item-3039{
width:30px;
height:20px;
border:none;
padding-right:0;
}
#menu-item-3039 a{
visibility:hidden;
}
#menu-item-3039 a::before{
visibility:visible;
display:block;
width:20px;
height:20px;
content:"";
background-size:20px 20px;
}
#menu-item-3039 a::before {
background-image:url("/wp-content/uploads/2015/05/moodle-icon.png");
}
Is there something very obviously wrong or missing to work with IE11?
It works just great in chrome and firefox, but does not work at all in IE11. I'm not very experienced with IE cross browser support, so it's likely that anything will help.
Thanks!
IE11 is inheriting the visibility from the a to their ::before.
I'd recomend you not to use that rule and use:
overflow: hidden;
text-indent: -1000px;
height: 20px;
display: block;
instead. This way you are hidding the text (what I think that is what you really want to do) and not affecting the background.
I am trying to show a button to access Accessibility options on the top of the page - normally hidden - when the user tabs to them.
HTML:
Accessbility Options
Style:
.access {display:none; position:fixed; top:0; left:0; padding:10px; font-size:25px; background:#eaeaea;}
.access:focus {display:block;}
However when you use the tab button once the page has first loaded, nothing shows. I have tried using :hover rather than focus etc; but I am struggling to find similar answers which handle it without any jQuery / over complicate it.
Instead of
display:none;
you could use
.access {opacity:0; position:fixed; top:0; left:0; padding:10px; font-size:25px; background:#eaeaea;}
.access:focus {opacity:1;}
Something with display:none will not be given an actual tabindex.
An Element with
display: none;
is not able to get focus!
You have to use another way to get the element invisible.
For example positioning it outside of the page, or opacity (note that it is clickable even if it is not visible).
Try using display: hidden or look into this question for a JavaScript solution
I have this line of CSS from the Twitter Bootstrap,
.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]
{
background-image:url("http://cdn.mydomain.com/static/img/glyphicons-halflings-white.png");
}
How would I go about making that not apply to .dropdown-menu>li.disabled>a, if the disabled class is present on the li I want it to ignore/not apply that CSS. Is this easily possible?
You could apply the style that you want for the general case to everything, and then, lower down in your script, you could override that with another style for the "disabled" class, that mimics your default behavior.
Something like this: http://jsfiddle.net/8cQvz/1/
div{
display:block;
height:25px;
width: 25px;
background-image:url("image.png");
float:left;
margin:5px;
}
div.no
{
background-image:none;
}
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>