I have a menu bar that shows in 1 state when page loads, as soon as you scroll down the menu bar shrinks and is given a class of .roll_activated which controls height and sizing.
I have a div that I would only like to show when the .roll_activated is not active
I'm missing something with my code here:
.roll_activated:HLinfobox{display:none !important;}
The div I want to hide has a class of HLinfobox
.roll_activated is not active
There is no such thing in CSS, but what you can do is nest elements and then show or hide them depending on their parent's state.
So, if the div that you want to show only when the menu bar has a class .roll_activated attached, you can do this (assuming #div is the div that you wanna toggle).
#div {
display: none;
}
.roll_activated #div {
display: block;
}
Assuming HTML structure like this:
<div class="roll_activated">
<div id="div"></div>
</div>
Here's a codepen: https://codepen.io/anon/pen/rGgygW
When displaying a div on hover, how can you target a specific div?
I need to display a hidden div from a link is on top of the page, and I can't figure out how.
When i tested, if the link and the div are one after the other, it displays corectly. but if i add another link before the first one, it does not work anymore.
From my testing using this CSS:
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
And this HTML:
<div class="expand">expand</div> <!--this does not do anithing-->
<div class="expand">expand</div> <!--this works-->
<div class="expandable">expandable</div>
Try the below one
.expandable{
display: none;
}
.expand:hover ~.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
Only the hover on the second div works because of the behaviour of the '+' selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
What W3C says :
Select and style every p element that are placed immediately after div elements:
div + p {
background-color: yellow;
}
you can hide div by id using : jQuery :
<div id=“div”>
</div>
<script>
$(“#div”).hide("slow"); // you can change "hide" to "show"
</script>
I have a <button> element which has been centered into the middle of the page with an anchor tag wrapped around it like seen in this JSFiddle.
From the JSFiddle if you hover your mouse on either side of the button the link is active. I could prevent this by wrapping it around a <div> and then apply this to the <div>:
div {
display: block;
margin: 0 auto;
}
However is there a better solution to this as in my case, I have many buttons like this and it would take long to apply? Thanks.
Are you referring to the space within the button, besides the "A Button" text, because I don't see any clickable area outside of the button. If so, I think that's just a function of the button tag. When I hover over the button, it highlights blue but my cursor doesn't change, like it should when I hover over a link.
If you throw the a href tag within the button, you'll get the cursor to change when you hover over the button's text. However, the button will still highlight button when you cursor is over the empty space within the button.
Also, what are you using the links for? Instead of hyperlinking the button, you might want to use the URL attribute within the button tag, if you're trying to use the button to send information somewhere.
The best solution to this was to just wrap the button with a form like so:
<form action="link-to-page-here">
<button>Button</button>
</form>
Using this, I can still center the button using:
button {
display: block;
margin: 0 auto;
}
But avoiding the link being clickable on the row of the button.
You shouldn't put a <button> inside of an <a> tag
just use the <button></button> and use the same style you've written for the button tag, so it should be something like that:
button {
display: block;
margin: 0 auto;
}
If you have to use the wrong markup and keep the button inside the <a> tag
just wrap the a tag inside a div tag and change styles to the following
<div>
<a href="">
<button>A Button</button>
</a>
</div>
and styles:
a{
display: inline-block;
margin: 0 auto;
}
div{
text-align: center;
}
button{
}
I want to hide a div element on mouse over only using css.
<div>Stuff shown on hover</div>
div {
display: block;
width:100px;
height:100px;
border: solid black;
}
div:hover {
display: none;
}
Why that doesn't work?
if I want to change -for example- the background instead it works just fine:
div:hover {
background-color: red;
}
Is not possible to hide/show the same element which I'm applying the hover selector?
http://jsfiddle.net/link01/TknA8/
Why that doesn't work?
Isn't that obvious ...?
The Div element is displayed.
You move your mouse over it - which puts it in its :hover state.
You say that for its :hover state, the element is to be removed completely from the rendered output.
Since it is now "not there any more", the mouse can't still be over it.
Mouse not over it any more means, element is no more in :hover state.
What does your CSS say again for the element when it is not in its :hover state?
Ah yes, display:block.
OK, browser renders the element again.
Hey, what's that, that freaking mouse is over it?
Let's see, that means it has to be removed again ...
When an element has its display set to none it doesn't exist in the layout and therefore can't be interacted with with the mouse.
Just add a wrapper around it:
<div class="wrapper">
<div class="hidden">Stuff shown on hover</div>
</div>
http://jsfiddle.net/cecAn/
I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn't work. Would I need to add something or perhaps this isn't the right way to do it? I appreciate any help :)
The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick...?
For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.
link to dabblet (not mine): http://dabblet.com/gist/1506530
link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/
This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...
.clicker {
width:100px;
height:100px;
background-color:blue;
outline:none;
cursor:pointer;
}
.hiddendiv{
display:none;
height:200px;
background-color:green;
}
.clicker:focus + .hiddendiv{
display:block;
}
<html>
<head>
</head>
<body>
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>
</body>
</html>
The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.
Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a> so it can be reachable through CSS:
http://jsfiddle.net/Jdrdh/2/
a .hidden {
visibility: hidden;
}
a:visited .hidden {
visibility: visible;
}
<div id="container">
<a href="#">
A
<div class="hidden">hidden content</div>
</a>
</div>
Fiddle to your heart's content
HTML
<div>
<a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
<div class="hiddendiv" id="testA">1</div>
<div class="hiddendiv" id="testB">2</div>
</div>
CSS
.hiddendiv {display: none; }
.testA:focus ~ #testA {display: block; }
.testB:focus ~ #testB {display: block; }
Benefits
You can put your menu links horizontally = one after the other in HTML code, and then you can put all the content one after another in the HTML code, after the menu.
In other words - other solutions offer an accordion approach where you click a link and the content appears immediately after the link. The next link then appears after that content.
With this approach you don't get the accordion effect. Rather, all links remain in a fixed position and clicking any link simply updates the displayed content. There is also no limitation on content height.
How it works
In your HTML, you first have a DIV. Everything else sits inside this DIV. This is important - it means every element in your solution (in this case, A for links, and DIV for content), is a sibling to every other element.
Secondly, the anchor tags (A) have a tabindex property. This makes them clickable and therefore they can get focus. We need that for the CSS to work. These could equally be DIVs but I like using A for links - and they'll be styled like my other anchors.
Third, each menu item has a unique class name. This is so that in the CSS we can identify each menu item individually.
Fourth, every content item is a DIV, and has the class="hiddendiv". However each each content item has a unique id.
In your CSS, we set all .hiddendiv elements to display:none; - that is, we hide them all.
Secondly, for each menu item we have a line of CSS. This means if you add more menu items (ie. and more hidden content), you will have to update your CSS, yes.
Third, the CSS is saying that when .testA gets focus (.testA:focus) then the corresponding DIV, identified by ID (#testA) should be displayed.
Last, when I just said "the corresponding DIV", the trick here is the tilde character (~) - this selector will select a sibling element, and it does not have to be the very next element, that matches the selector which, in this case, is the unique ID value (#testA).
It is this tilde that makes this solution different than others offered and this lets you simply update some "display panel" with different content, based on clicking one of those links, and you are not as constrained when it comes to where/how you organise your HTML. All you need, though, is to ensure your hidden DIVs are contained within the same parent element as your clickable links.
Season to taste.
In 2022 you can do this with just HTML by using the details element. A summary or label must be provided using the summary element. details is supported by all major browsers.
<details>
<summary>Click Here for more info</summary>
Here is the extra info you were looking for.
</details>
HTML
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
CSS
#content {
display: none;
}
input[type="text"]{
color: transparent;
text-shadow: 0 0 0 #000;
padding: 6px 12px;
width: 150px;
cursor: pointer;
}
input[type="text"]:focus{
outline: none;
}
input:focus + div#content {
display: block;
}
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
A little hack-ish but it works. Note that the label tag can be placed any where. The key parts are:
The css input:checked+div selects the div immediately next to/after the input
The label for said checkbox (or hey leave out the label and just have the checkbox)
display:none hides stuff
Code:
<head>
<style>
#sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
#content {height:100%; background:green; width:400px; clear:none; float:left;}
label {background:yellow;float:left;}
input{display:none;}
input:checked+#sidebar{display:none;}
</style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>
<div id="content">hello</div>
</div>
</body>
EDIT: Sorry could have read the question better.
One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.
You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a css method to override the above and slide and fade for transitions.
Tilda(~) mean some sibling after; not next sibling like plus(+).
[key="value"] is an attribute selector.
Radio buttons must have same name
To string tabs together one could use:
<html>
<head>
<style>
input[value="1"]:checked ~ div[id="1"]{
display:none;
}
input[value="2"]:checked ~ div[id="2"]{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="hider" value="1">
<input type="radio" name="hider" value="2">
<div id="1">div 1</div>
<div id="2">div 2</div>
</body>
</html>
You could do this with the CSS3 :target selector.
menu:hover block {
visibility: visible;
}
block:target {
visibility:hidden;
}
You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.
if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:
Hide Show content-list with only CSS, no javascript used
You can find <div> by id, look at it's style.display property and toggle it from none to block and vice versa.
function showDiv(Div) {
var x = document.getElementById(Div);
if(x.style.display=="none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />
With this method, when you click on Nav Dropdown elements it will NOT disappear, unlike plain :focus solution.
key is:
tabindex in parent element
parentDiv:focus-within hiddenDiv { display: block;}
it will work with both: display and visibility css;
HTML code:
<div className="DevNavBar dbb">
{/* MAKE SURE TO ADD TABINDEX TO PARENT ELEMENT, OTHERWISE FAILS */}
<div className="DevNavBar_Item1 drr" tabIndex="0">
item1
<div className="DevNavBar_Item1_HiddenMenu dgg">
<ul>
<li>blah1</li>
<li>blah2</li>
</ul>
</div>
</div>
</div>
CSS code:
.DevNavBar {
padding: 40px;
}
.DevNavBar_Item1 {
padding: 20px;
width: fit-content;
cursor: pointer;
position: relative;
}
.DevNavBar_Item1:hover {
color: red;
}
.DevNavBar_Item1_HiddenMenu {
display: none;
position: absolute;
padding: 10px;
background-color: white;
z-index: 10;
left: 0;
top: 70px;
}
.DevNavBar_Item1:focus {
color: red; // this is so that when Nav Item is opened, color stays red
}
.DevNavBar_Item1:focus-within .DevNavBar_Item1_HiddenMenu {
display: block;
color: black; // this is to remove Bubbling, otherwise it will be RED, like the hover effect
}
Here is Video Demo I created on my youtube channel (note: this is my youtube channel, so I am affiliated to that channel), the link is for 'show and tell' purposes: https://youtu.be/QMqcZjmghf4
CSS does not have an onlclick event handler. You have to use Javascript.
See more info here on CSS Pseudo-classes: http://www.w3schools.com/css/css_pseudo_classes.asp
a:link {color:#FF0000;} /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;} /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;} /* selected link - the user has clicked the link and the browser is loading the new page */