I would like to set the below content as hidden by default. The code is working fine but it's displaying all the content when you land on the page.
.show {
display: none;
}
.hide:focus+.show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus~#list {
display: none;
}
#media print {
.hide,
.show {
display: none;
}
}
<p>Click below to learn how to access LearnHub and the services available to employees.</p>
<div>
[hide]
[show]
<ol id="list">
<p>
<h2>How to access LearnHub</h2>
<p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p>
</ol>
</div>
If you want the element with the ID of list to be invisible when the page loads, add an entry into the CSS to set its display property to none.
#list {display:none;}
You'll also need to add the opposites or complements of many of the CSS rules you currently have in place, as demonstrated in the snippet below:
#list {
display: none;
}
.hide {
display: none;
}
.show:focus+.hide {
display: inline;
}
.show:focus {
display: none;
}
.show:focus~#list {
display: inline;
}
.hide:focus+.show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus~#list {
display: none;
}
<div>
[show]
[hide]
<ol id="list">
<p>
<h2>How to access LearnHub</h2>
<p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p>
</ol>
</div>
Related
I want to change the color of the menu on text hover. But not when the menu text is hovered but another heading. I have a heading "Not a restaurant, but here for them." and when the user hovers the word "restaurant" the menu text color should change to white and the word "restaurant" to red and the rest of the heading to white. The second part (that "restaurant" changes to red and the rest of the heading to white) already works. But how can I make it that also the color of the menu changes?
.headingRestaurant:hover {
color: red;
}
.headingRestaurant {
cursor: pointer;
}
.textb {
pointer-events: none;
}
.headingRestaurant {
pointer-events: initial;
}
.textb:hover {
color: white;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
</ul>
</nav>
<h1 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br> but here for them.
</h1>
Since CSS can only interact with things inside or below the current element, the easiest solution would be to use Javascript to handle the hover for you.
You can use the function addEventListener to add both a mouseover and a mouseout event on your restaurant text to add/remove a hover class to whichever element you want to hover.
var nav = document.querySelector('nav');
var headingRestaurant = document.querySelector('.headingRestaurant');
headingRestaurant.addEventListener('mouseover', function() {
nav.classList.add('hover');
});
headingRestaurant.addEventListener('mouseout', function() {
nav.classList.remove('hover');
});
.headingRestaurant:hover {
color: red;
}
.headingRestaurant {
cursor: pointer;
}
.textb {
pointer-events: none;
}
.headingRestaurant {
pointer-events: initial;
}
.textb:hover {
color: white;
}
nav.hover,
nav.hover a {
color: red;
}
<nav>
<ul>
<li>
<a
href="file:///C:/Users/.../index.html"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
>About</a
>
</li>
</ul>
</nav>
<h1 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br />
but here for them.
</h1>
If you'd like to use html and css only, you'd have to reverse the html flow so that the element you want to change is coded below the element you're hovering over.
In this case I've moved the nav and h1 to a container div and swapped them around so that the h1 is coded above the nav. The display order is then fixed by using both the properties display: flex and flex-direction: column-reverse. The hover in this method uses the css selector ~ which matches an selector that is preceded by another selector. In the case of .textb:hover ~ nav it would select any nav element that is preceded by a .textb which is hovered over. Since the part after the ~ is still a selector, you could also change a specific menu item.
.headingRestaurant {
cursor: pointer;
pointer-events: initial;
}
.textb {
pointer-events: none;
}
.textb:hover {
color: white;
}
.textb:hover .headingRestaurant {
color: red;
}
.textb:hover ~ nav,
.textb:hover ~ nav a {
color: red;
}
.textb:hover ~ nav a.about {
color: purple;
}
.reversed {
display: flex;
flex-direction: column-reverse;
}
<div class="reversed">
<h1 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br />
but here for them.
</h1>
<nav>
<ul>
<li>
<a class="about" href="file:///C:/Users/.../index.html">Home</a>
</li>
<li>
About
</li>
</ul>
</nav>
</div>
:has is definitely the way to go here but there are some clever cookies out there who might come up with something innovative. Note that this isn't fully supported yet.
/* This is just making things pretty */
nav ul li {
display: inline-block;
padding: 0.5rem 1rem;
margin: 0;
border: 1px dotted red;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: inherit;
}
/* This is the functional stuff */
.headingRestaurant:hover {
color: red;
}
.headingRestaurant {
cursor: pointer;
}
.textb {
pointer-events: none;
}
.headingRestaurant {
pointer-events: initial;
}
.textb:hover {
color: white;
}
/* This colours the menu on hover */
body:has(.headingRestaurant:hover) nav {
background-color: lightblue;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
</ul>
</nav>
<h1 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br> but here for them.
</h1>
Replace target with whatever class/id you are using to identify your menu element and it will control the styling when hovering on the .headingRestaurant element.
.headingRestaurant:hover target {
}
hello how do i prevent the content from collapsing/hiding when i click on Content 1 or 2
.details,
.show,
.hide:target {
display: none;
color: black;
}
.hide:target+.show,
.hide:target~.details {
display: block;
color: black;
}
<a id="hide1" href="#hide1" class="hide">+ Content</a>
<a id="show1" href="#show1" class="show">- Content</a>
<div class="details">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>
.hide {
cursor: pointer;
}
.hide::before {
content: '+ Content';
display: block;
}
.hide::after {
content: '- Content';
display: none;
}
.details {
display: none;
transition:all 0.4s linear;
}
input:checked ~ .details,
input:checked + .hide::after {
display: block;
}
input:checked + .hide::before {
display: none;
}
<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle" class="hide"></label>
<div class="details">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>
Anchor tags reload the pages and thus the main div is collapsing.
You can either use this.
<li>Content1</li>
<li>Content2</li>
Or if you still want to use href then return false on click which will prevent it from reloading the page.
<li>Content1</li>
<li>Content2</li>
The problem with target is that it disappears from the content +/- when the user clicks on something else.
To remember whether the content + or - has been clicked you can use a checkbox.
If you make the +/- content into labels instead of divs then they can be associated with the checkbox (using for=) and you can hide the actual checkbox.
#showhide {
position: absolute;
opacity: 0;
}
#showhide~#show {
display: block;
}
#showhide:checked~#show {
display: none;
}
#showhide~#hide {
display: none;
}
#showhide:checked~#hide {
display: block;
}
#showhide~.details {
display: none;
}
#showhide:checked~.details {
display: block;
}
<input id="showhide" type="checkbox">
<label for="showhide" id="show">+ Content</label>
<label for="showhide" id="hide">- Content</label>
<div class="details">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>
I try to make menu for mobile display so i make a div for the menu links and want to style it so it formed a single column. so i add the display: block; attribute. But the links still form inline. How can i make it in a single column?
.header {
&__menu {
background: $white;
padding: 1.25rem;
a{
display: block;
color:$darknavyblue;
}
}
}
<header class="header">
<div class="header__menu">
Home
Profile
Services
Publication
Contact
</div>
</header>
Enjoy it!
.header {
&__menu {
background: $white;
padding: 1.25rem;
a{
color:$darknavyblue;
}
}
}
div a{
display: block;
}
Another option would be to add a break tag after each a tag:
<header class="header">
<div class="header__menu">
Home<br>
Profile<br>
Services<br>
Publication<br>
Contact<br>
</div>
I am trying to hide some content on a webpage until a user clicks on the [...]. So far Google has gotten me the following
<p>some text I want to show</p>
[...]
[...]
<div id ="list">
<p>content I want to hide</p>
</div>
CSS
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
#media print { .hide, .show { display: none; } }
It works, but I would like hidden to be the default, and I cannot seem to figure out how to accomplish that.
As always, any help is appreciated.
Just change css like following will work for you.
First hide list. And on focus display.
.show {display: none; }
#list { display:none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }
Fiddle
I have this code:
<a class="active"
data-ui-sref="exams">
Exams
</a>
<span class="active">
Exams
</span>
Is there a way that I can make the link display inline when it does NOT have a class of active and make the span display inline ONLY when it has a class of active. I think I can use the display property but I am not sure how to make something display when it does not have a class only.
Here I add a bit more to the question as maybe it was not clear. Please note I would like this to display:
<a>xx</a>
this not to display:
<a class="active">xx</a>
You can use pseudo-class :not.
Note: This doesn't work for IE <=8. Thanks #torazaburo for pointing out.
span {
color: yellow;
}
span:not(.active) {
display: block;
color: red;
}
a {
display: block;
color: purple;
}
a:not(.active) {
display: inline;
color: green;
}
<a class="active" data-ui-sref="exams">Anchor with class active</a>
<span class="active"> span with class active</span>
<a data-ui-sref="exams"> anchor without class active</a>
<span> span without class active</span>
You can simply do it by using the display property of CSS.
a .active {
display: inline; /*Show when class active is there*/
}
a {
display: none; /*Hide when there is no class*/
}
span {
display: none; /*Hide when class active is not there*/
}
span .active
{
display: block; /*Hide when there is active class for the span*/
}
/* Hide the link by default */
a {
display: none;
}
/* Show when it has active class */
a.active {
display: inline;
}
With only css only, I think that this may be what you want :
a, span.active {
display: inline;
}
a.active, span {
display: none;
}
See the jsfiddle.