I have an image element that I want to change on click.
<img id="btnLeft">
This works:
#btnLeft:hover {
width: 70px;
height: 74px;
}
But what I need is:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
But, it doesn't work, obviously. Is it possible at all to have onclick behavior in CSS (i.e., without using JavaScript)?
The best way (actually the only way*) to simulate an actual click event using only CSS (rather than just hovering on an element or making an element active, where you don't have mouseUp) is to use the checkbox hack. It works by attaching a label to an <input type="checkbox"> element via the label's for="" attribute.
This feature has broad browser support (the :checked pseudo-class is IE9+).
Apply the same value to an <input>'s ID attribute and an accompanying <label>'s for="" attribute, and you can tell the browser to re-style the label on click with the :checked pseudo-class, thanks to the fact that clicking a label will check and uncheck the "associated" <input type="checkbox">.
* You can simulate a "selected" event via the :active or :focus pseudo-class in IE7+ (e.g. for a button that's normally 50px wide, you can change its width while active: #btnControl:active { width: 75px; }), but those are not true "click" events. They are "live" the entire time the element is selected (such as by Tabbing with your keyboard), which is a little different from a true click event, which fires an action on - typically - mouseUp.
Basic demo of the checkbox hack (the basic code structure for what you're asking):
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>
Here I've positioned the label right after the input in my markup. This is so that I can use the adjacent sibling selector (the + key) to select only the label that immediately follows my #demo checkbox. Since the :checked pseudo-class applies to the checkbox, #demo:checked + label will only apply when the checkbox is checked.
Demo for re-sizing an image on click, which is what you're asking:
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>
With that being said, there is some bad news. Because a label can only be associated with one form control at a time, that means you can't just drop a button inside the <label></label> tags and call it a day. However, we can use some CSS to make the label look and behave fairly close to how an HTML button looks and behaves.
Demo for imitating a button click effect, above and beyond what you're asking:
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
Most of the CSS in this demo is just for styling the label element. If you don't actually need a button, and any old element will suffice, then you can remove almost all of the styles in this demo, similar to my second demo above.
The closest you'll get is :active:
#btnLeft:active {
width: 70px;
height: 74px;
}
However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.
You can use the pseudo class :target to mimic the on click event. Let me give you an example.
#something {
display: none;
}
#something:target {
display: block;
}
Show
<div id="something">Bingo!</div>
Here's how it looks like: http://jsfiddle.net/TYhnb/
One thing to note is this is only limited to hyperlink, so if you need to use on another than a hyperlink, such as a button, you might want to hack it a little bit, such as styling a hyperlink to look like a button.
If you give the element a tabindex then you can use the :focus pseudo class to simulate a click.
#btnLeft:focus {
width: 70px;
height: 74px;
}
<img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>
The following is for an onclick similar to JavaScript's onclick, not the :active pseudo class.
This can only be achieved with either JavaScript or the Checkbox Hack.
The checkbox hack essentially gets you to click on a label, that "checks" a checkbox, allowing you to style the label as you wish.
The demo.
Answered before OP clarified what he wanted.
TylerH made a really good answer, and I just had to give that last button a visual update.
.btn {
border-radius: 5px;
padding: 10px 30px;
box-shadow: 1px 1px 1px #000;
background-image: linear-gradient(to bottom, #eee, #ddd);
}
.btn:hover {
background-image: linear-gradient(to top, #adf, #8bf);
}
.btn:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
}
#btnControl {
display: block;
visibility: hidden;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
Use a pure CSS solution without being (that) hacky.
.page {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #121519;
color: whitesmoke;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.arrow {
cursor: pointer;
transition: filter 0.3s ease 0.3s;
}
.arrow:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}
<body class="page">
<div class="controls">
<div class="arrow">
<img src="https://i.imgur.com/JGUoNfS.png" />
</div>
</div>
</body>
TylerH has a great response, but it’s a pretty complex solution. I have a solution for those of you that just want a simple "onclick" effect with pure CSS without a bunch of extra elements.
We will simply use CSS transitions. You could probably do similar with animations.
The trick is to change the delay for the transition so that it will last when the user clicks.
.arrowDownContainer:active,
.arrowDownContainer.clicked {
filter: drop-shadow(0px 0px 0px steelblue);
transition: filter 0s;
}
Here I add the "clicked" class as well, so that JavaScript can also provide the effect if it needs to. I use a zero pixel drop-shadow filter, because it will highlight the given transparent graphic blue this way for my case.
I have a filter at 0s here, so that it won’t take effect. When the effect is released, I can then add the transition with a delay, so that it will provide a nice "clicked" effect.
.arrowDownContainer {
cursor: pointer;
position: absolute;
bottom: 0px;
top: 490px;
left: 108px;
height: 222px;
width: 495px;
z-index: 3;
transition: filter 0.3s ease 0.3s;
}
This allows me to set it up so that when the user clicks the button, it highlights blue then fades out slowly (you could, of course, use other effects as well).
While you are limited here in the sense that the animation to highlight is instant, it does still provide the desired effect. You could likely use this trick with animation to produce a smoother overall transition.
Warning! Particularly simple answer below! :)
You actually can have a change that persists (such as a block/popup that appears and stays visible after a click) with only CSS (and without using the checkbox hack) despite what many of the (otherwise correct) answers here claim, as long as you only need persistence during the hover.
So take a look at Bojangles' and TylerH's answers if those work for you, but if you want a simple and CSS-only answer that will keep a block visible after being clicked on (and even can have the block disappear with a follow-up click), then see this solution.
I had a similar situation. I needed a popup div with onClick where I couldn't add any JavaScript or change the markup/HTML (a true CSS solution) and this is possible with some caveats. You can't use the :target trick that can create a nice popup unless you can change the HTML (to add an 'id'), so that was out.
In my case, the popup div was contained inside the other div, and I wanted the popup to appear on top of the other div, and this can be done using a combination of :active and :hover:
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
display: block;
}
/* General settings for popup */
.info {
position: absolute;
top: -5;
display: none;
z-index: 100;
background-color: white;
width: 200px;
height: 200px;
}
Example (as well as one that allows clicking on the popup to make it disappear) at:
CSS-Only onClick to Popup Div (no Javascript or HTML changes!)
I've also inserted a code snippet example below, but the positioning in the Stack Overflow sandbox is weird, so I had to put the 'click here' text after the innerDiv, which isn't normally needed.
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { visibility: visible; }
/* And hold by staying visible on hover */
.info:hover {
visibility: visible;
}
/* General settings for popup */
.info {
position: absolute;
top: -10;
visibility: hidden;
z-index: 100;
background-color: white;
box-shadow: 5px 5px 2px #aaa;
border: 1px solid grey;
padding: 8px;
width: 220px;
height: 200px;
}
/* If we want clicking on the popup to close, use this */
.info:active {
visibility: hidden; /* Doesn't work because DCEvent is :active as well */
height: 0px;
width: 0px;
left: -1000px;
top: -1000px;
}
<p />
<div class="clickToShowInfo">
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
Click here to show info
</div>
<p />
Firstly I will use focus
The reason for this is that it works nicely for the example I'm showing. If someone wants a mouse down type event then use active.
The HTML code:
<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>
The CSS code
/* Change *button size, border, bg color, and align to middle* */
.mdT {
width: 96px;
height: 96px;
border: 0px;
outline: 0;
vertical-align: middle;
background-color: #AAAAAA;
}
.mdT:focus {
width: 256px;
height: 256px;
}
/* Change Images Depending On Focus */
.mdI1 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+4'); }
JSFiddle link: http://jsfiddle.net/00wwkjux/
The OP only wants the effect to last during the click event. Now while this is not exact for that need, it’s close. active will animate while the mouse is down and any changes that you need to have to last longer need to be done with JavaScript.
Before we go to the heart of the matter, let’s get it right for future reference — You should handle a click event with JavaScript.
document.querySelector('img').addEventListener('click', function() {
this.classList.toggle('large');
});
.large {
width: 75px;
height: 75px;
}
<img src="https://i.stack.imgur.com/5FBwB.png" alt="Heart">
However, if for some reason you can’t use JavaScript, there are two common approaches to mimic a click event and create a toggle button with CSS.
Checkbox hack 👎
The checkbox hack is not a good practice:
It’s not semantically correct, and that’s why it’s called a hack.
It causes accessibility issues for keyboard users and screen readers.
It restricts you in the structure of your HTML as the checkbox needs to be a previous sibling of the element you want to control.
You can’t control the <html> and <body> elements.
:target selector 👍
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment. As you see in the following example, the doer’s href value, #fade-out, matches the target element’s id.
a {
display: inline-block;
padding: 8px 12px;
border-radius: 5px;
background: linear-gradient(#eee, #ddd);
color: #333;
font: bold 12px Verdana;
text-shadow: 0 1px white;
text-decoration: none;
}
p {
font: 13px/1.5 Arial;
padding: 1em;
background: aqua;
transition: 1s linear;
}
:target {
opacity: 0;
}
Fade out
<p id="fade-out">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
The :target selector can be used to style the current active target element. That means it works like a radio button: Only one in a given group can be selected at the same time.
body {
display: inline-grid;
font: 16px "Times New Roman";
}
a {
padding-left: 24px;
margin: 0 2em 1em 0;
justify-self: start;
background: radial-gradient(circle 7px at 8px, #dedede 7px, transparent 8px);
color: #333;
text-decoration: none;
}
a:hover {
background: radial-gradient(circle 7px at 8px, #ccc 7px, transparent 8px);
}
a:target {
background: radial-gradient(circle 7px at 8px, dodgerBlue 4px, white 5px 6px, dodgerBlue 7px, transparent 8px);
}
div {
grid-area: 1 / 2 / 7;
width: 154px;
height: 154px;
text-align: center;
background: aqua;
color: black;
border-radius: 50%;
transition: 0.3s linear;
}
#rotate90:target ~ div {
transform: rotate(90deg);
}
#rotate180:target ~ div {
transform: rotate(180deg);
}
#rotate270:target ~ div {
transform: rotate(270deg);
}
#rotate360:target ~ div {
transform: rotate(360deg);
}
0°
90°
180°
270°
360°
<div>•</div>
Q. How can you create a toggle button?
A. Basically, this is how it works: You use two hyperlinks, a “doer” and an “undoer”. The doer points to the target element, and the undoer, which points to nowhere, reverses the effect.
The following demos show the :target selector's potential and give you an idea of how to use it.
Style a previous sibling
div {
width: 200px;
height: 200px;
background: #dedede;
transition: 0.3s ease-in-out;
}
a {
display: inline-flex;
align-items: center;
column-gap: 1ch;
margin-top: 1em;
font: 16px Arial;
color: #333;
text-decoration: none;
}
a::before {
content: "✔";
font-size: 13px;
width: 1.2em;
line-height: 1.2em;
text-align: center;
background: #dedede;
color: transparent;
}
.undoer::before {
background: dodgerBlue;
color: white;
text-shadow: 0 2px black;
}
.doer:hover::before {
background: #ccc;
}
:target {
border-radius: 50%;
}
.undoer,
:target ~ .doer {
display: none;
}
:target ~ .undoer {
display: inline-flex;
}
<div id="circle"></div>
Circle
Circle
Style a next sibling
A link can target even the very same anchor element.
body {
text-align: center;
}
h1 {
font-size: 24px;
}
a {
display: inline-block;
padding: 8px 12px;
border-radius: 5px;
margin-bottom: 1em;
background: linear-gradient(#eee, #ddd);
color: #333;
font: bold 12px Verdana;
text-shadow: 0 1px white;
text-decoration: none;
}
[class]:not(.yellow) {
color: white;
text-shadow: 0 1px black;
}
.red {
background: red;
}
.orange {
background: orange;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
.blue {
background: blue;
}
.indigo {
background: indigo;
}
.violet {
background: violet;
}
div {
width: 600px;
height: 400px;
margin: 0 auto;
background: #eee;
transition: 0.3s ease-in-out;
}
[class],
:target {
display: none;
}
:target + a {
display: inline-block;
}
#red:target ~ div {
background: red;
}
#orange:target ~ div {
background: orange;
}
#yellow:target ~ div {
background: yellow;
}
#green:target ~ div {
background: green;
}
#blue:target ~ div {
background: blue;
}
#indigo:target ~ div {
background: indigo;
}
#violet:target ~ div {
background: violet;
}
<h1>🌈</h1>
Red
Red
Orange
Orange
Yellow
Yellow
Green
Green
Blue
Blue
Indigo
Indigo
Violet
Violet
<div></div>
Replace an element
As you may have noticed, you can entirely replace an element with another one.
.undoer,
:target {
display: none;
}
:target + .undoer {
display: inline;
}
<img src="https://i.stack.imgur.com/nuKgJ.png" alt="Light on">
<img src="https://i.stack.imgur.com/3DLVM.png" alt="Light off">
You may even nest block-level elements inside your anchors.
If you wish to have a transition effect when you switch from the doer to the undoer, use position: absolute on the first and visibility: hidden on the second.
a {
display: block;
box-sizing: border-box;
width: 64px;
padding-left: 33px;
border-radius: 16px;
background: radial-gradient(circle 12px, white 100%, transparent calc(100% + 1px)) #ccc -16px;
font: bold 12px/32px Verdana;
color: white;
text-shadow: 0 1px black;
text-decoration: none;
transition: 0.3s ease-in-out;
transition-property: padding-left, background-color, background-position;
}
#start {
position: absolute;
}
:target,
:target + .undoer {
padding-left: 8px;
background-color: dodgerBlue;
background-position: 16px;
}
.undoer,
:target {
visibility: hidden;
}
:target + .undoer {
visibility: visible;
}
OFF
ON
Hide and show content
Here's a navigation menu.
html,
body {
margin: 0;
padding: 0;
}
header {
display: flex;
line-height: 50px;
background: linear-gradient(#999, #333);
color: white;
}
a {
color: inherit;
text-decoration: none;
}
header > a,
header h1 {
font-size: 26px;
font-family: 'Times New Roman';
text-shadow: 0 3px black;
}
header > a {
width: 50px;
text-align: center;
}
header h1 {
margin: 0;
letter-spacing: 1px;
}
nav {
position: absolute;
top: 50px;
background: #333;
visibility: hidden;
transform: translateX(-100%);
transition: 280ms ease-out 120ms;
}
nav a {
display: block;
padding: 1em;
font: bold 12px Verdana;
transition: inherit;
}
nav a:not(:last-child) {
border-bottom: 1px solid black;
}
nav a:hover,
#current {
background: #A00;
}
.undoer,
:target {
display: none;
}
:target + .undoer {
display: block;
}
:target ~ nav {
visibility: visible;
transform: none;
}
main {
padding: 16px;
font: 13px Arial;
color: #333;
}
main h1 {
font-size: 1.5em;
}
p {
line-height: 1.5;
}
<header>
☰
✕
<h1>🎹 Music School</h1>
<nav>
Home
Instruments
Online Lessons
Register
Contact
</nav>
</header>
<main>
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
And here's an FAQ page.
body {
font: 16px Arial;
color: #333;
max-width: 600px;
margin: 1em auto;
}
h1 {
text-align: center;
font-family: "Times New Roman";
}
p {
display: none;
padding: 12px;
border: 2px solid #dedede;
border-top: 0;
margin: 0;
font-size: 13px;
line-height: 1.5;
}
a {
display: flex;
align-items: center;
column-gap: 12px;
padding: 12px;
margin-top: 1em;
background: #dedede;
color: inherit;
font-weight: bold;
line-height: 1.5;
text-shadow: 0 1px white;
text-decoration: none;
}
a::before {
content: "➕";
padding: 3px;
background: #eee;
font-weight: initial;
}
a[href="#close"]::before {
content: "➖";
}
a:hover::before {
background: #fff;
}
a[href="#close"],
a:target {
display: none;
}
a:target + a {
display: flex;
}
a:target + a + p {
display: block;
}
<h1>Frequently Asked Questions</h1>
How do we get more energy from the sun?
How do we get more energy from the sun?
<p>Dwindling supplies of fossil fuels mean we’re in need of a new way to power our planet. Our nearest star offers more than one possible solution. We’re already harnessing the sun’s energy to produce solar power. Another idea is to use the energy in sunlight to split water into its component parts: oxygen, and hydrogen, which could provide a clean fuel for cars of the future. Scientists are also working on an energy solution that depends on recreating the processes going on inside stars themselves – they’re building a nuclear fusion machine. The hope is that these solutions can meet our energy needs.</p>
What's so weird about prime numbers?
What's so weird about prime numbers?
<p>The fact you can shop safely on the internet is thanks to prime numbers – those digits that can only be divided by themselves and one. Public key encryption – the heartbeat of internet commerce – uses prime numbers to fashion keys capable of locking away your sensitive information from prying eyes. And yet, despite their fundamental importance to our everyday lives, the primes remain an enigma. An apparent pattern within them – the Riemann hypothesis – has tantalised some of the brightest minds in mathematics for centuries. However, as yet, no one has been able to tame their weirdness. Doing so might just break the internet.</p>
Can computers keep getting faster?
Can computers keep getting faster?
<p>Our tablets and smartphones are mini-computers that contain more computing power than astronauts took to the moon in 1969. But if we want to keep on increasing the amount of computing power we carry around in our pockets, how are we going to do it? There are only so many components you can cram on to a computer chip. Has the limit been reached, or is there another way to make a computer? Scientists are considering new materials, such as atomically thin carbon – graphene – as well as new systems, such as quantum computing.</p>
When can I have a robot butler?
When can I have a robot butler?
<p>Robots can already serve drinks and carry suitcases. Modern robotics can offer us a “staff” of individually specialised robots: they ready your Amazon orders for delivery, milk your cows, sort your email and ferry you between airport terminals. But a truly “intelligent” robot requires us to crack artificial intelligence. The real question is whether you’d leave a robotic butler alone in the house with your granny. And with Japan aiming to have robotic aides caring for its elderly by 2025, we’re thinking hard about it now.</p>
What's at the bottom of the ocean?
What's at the bottom of the ocean?
<p>Ninety-five per cent of the ocean is unexplored. What’s down there? In 1960, Don Walsh and Jacques Piccard travelled seven miles down, to the deepest part of the ocean, in search of answers. Their voyage pushed the boundaries of human endeavour but gave them only a glimpse of life on the seafloor. It’s so difficult getting to the bottom of the ocean that for the most part we have to resort to sending unmanned vehicles as scouts. The discoveries we’ve made so far – from bizarre fish such as the barreleye, with its transparent head, to a potential treatment for Alzheimer’s made by crustaceans – are a tiny fraction of the strange world hidden below the waves.</p>
What's at the bottom of a black hole?
What's at the bottom of a black hole?
<p>It’s a question we don’t yet have the tools to answer. Einstein’s general relativity says that when a black hole is created by a dying, collapsing massive star, it continues caving in until it forms an infinitely small, infinitely dense point called a singularity. But on such scales quantum physics probably has something to say too. Except that general relativity and quantum physics have never been the happiest of bedfellows – for decades they have withstood all attempts to unify them. However, a recent idea – called M-Theory – may one day explain the unseen centre of one of the universe’s most extreme creations.</p>
How do we solve the population problem?
How do we solve the population problem?
<p>The number of people on our planet has doubled to more than 7 billion since the 1960s and it is expected that by 2050 there will be at least 9 billion of us. Where are we all going to live and how are we going to make enough food and fuel for our ever-growing population? Maybe we can ship everyone off to Mars or start building apartment blocks underground. We could even start feeding ourselves with lab-grown meat. These may sound like sci-fi solutions, but we might have to start taking them more seriously.</p>
Switch to a whole new stylesheet
You can target and style an element as well as all its descendants. For example, let’s target the <body> element and toggle dark/light mode.
body,
a,
h2 {
transition: 0.3s linear;
}
body {
font: 13px Arial;
background: white;
color: #333;
}
a {
font-size: 16px;
text-decoration: none;
}
main {
column-count: 3;
column-gap: 2em;
padding: 0 1em;
}
h1 {
column-span: all;
text-align: center;
}
h2:nth-of-type(1) {
margin-top: 0;
}
p {
line-height: 1.5;
}
:target {
background: #333;
color: white;
}
.doer {
position: absolute;
}
.undoer,
:target .doer {
visibility: hidden;
opacity: 0;
}
:target .undoer {
visibility: visible;
opacity: 1;
}
:target h2:nth-of-type(1) {
color: red;
}
:target h2:nth-of-type(2) {
color: green;
}
:target h2:nth-of-type(3) {
color: blue;
}
<body id="dark">
🌙
☀️
<main>
<h1>Primary Colors</h1>
<h2>Red</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Green</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Blue</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
🎯🎯🎯
I had a problem with an element which had to be colored red on hover and be blue on click while being hovered. To achieve this with CSS you need for example:
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>
I struggled for some time until I discovered that the order of CSS selectors was the problem I was having. The problem was that I switched the places and the active selector was not working. Then I found out that :hover to go first and then :active.
I have the below code for mouse hover and mouse click and it works:
//For Mouse Hover
.thumbnail:hover span{ /* CSS for enlarged image */
visibility: visible;
text-align: center;
vertical-align: middle;
height: 70%;
width: 80%;
top: auto;
left: 10%;
}
And this code hides the image when you click on it:
.thumbnail:active span {
visibility: hidden;
}
Depending on what you want to do, letting the focus maintain the change could be an option?
<button></button>
<style>
button {
width: 140px;
height: 70px;
background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
background-size: cover;
}
button:focus {
width: 240px;
height: 120px;
}
</style>
https://jsfiddle.net/anm92d0r/
Note this doesnt work with the image tag. But judging by your element id, I'm assuming you're are looking for button functinality.
You can use :target.
Or to filter by class name, use .classname:target.
Or filter by id name using #idname:target.
#id01:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.msg {
display: none;
}
.close {
color: white;
width: 2rem;
height: 2rem;
background-color: black;
text-align: center;
margin: 20px;
}
Open
<div id="id01" class="msg">
×
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>
Related
I am enabling an overlay upon clicking on button, then when user minimizes the screen overlay is not covering full page. User able to click on buttons when minimizes the screen.
I am setting the screen.height & screen.width to overlay div. But upon minimizes to certain level again buttons are visible.
id1 is a id of overlay division
document.getElementById("id1").style.height=screen.height;
document.getElementById("id1").style.width=screen.width;
i want overlay to display over complete web page
Ok, Here is what we do to create Overlays..
You should have a parent div like
<div class="body_wrapper">
<div class="overlay"></div>
<div class="page_content">
<-- You Page Content -->
</div>
</div>
Here inside <body> tag you got a body_wrapper and inside that you got overlay and page__content. Now in your style sheet:
.body_wrapper {
position: relative;
}
.overlay {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
The screen.height doesn't always return the valid screen height,
check this for more information.
Your task can be achieved by CSS and a little bit of JavaScript.
The CSS has two units that are likely the keys to your issue : the vw and the vh units. Check this MDN article for more information.
So, here's a demo that shows how you can achieve your task by the help of CSS and some JavaScript for the event handling.
let trigger = document.getElementById('trigger'),
triggersClose = document.querySelectorAll('.trigger-close'),
fullScreen = document.getElementById('fullscreen');
/** click event listener for the button to show the overlay **/
trigger.addEventListener('click', e => {
e.preventDefault();
fullScreen.classList.add('visible'); /** add .visible class so the overlay is shown **/
});
/** cycle through the buttons that can hide the overlay and add a click event for them **/
triggersClose.forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
fullScreen.classList.remove('visible'); /** remove .visible class so the overlay becomes hidden **/
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.overlay {
display: none; /** the overlay is initially hidden **/
position: fixed; /** stays on the same place even when scrolling in the background **/
width: 100vw; /** vw : viewport width = 1% of the viewport's width. It changes accordingly when zooming (responsive) **/
height: 100vh; /** vh : viewport height = 1% of the viewport's height. It changes accordingly when zooming (responsive) **/
top: 0;
left: 0;
justify-content: center; /** center the content horizontally **/
align-items: center; /** center the content vertically **/
padding: 15px;
background: rgba(24, 24, 24, .6);
z-index: 999; /** stays on top **/
}
.overlay.visible {
/** this class is used by JavaScript to show the overlay **/
display: flex; /** flex makes our life easier ! **/
}
.overlay .overlay-wrapper {
display: flex;
flex-direction: column;
width: 65%;
max-height: 100%;
overflow-y: auto; /** adds scrollbars when the content is too much **/
background-color: #fff;
}
.overlay .overlay-wrapper .overlay-header {
position: relative;
background-color: #1548a6;
}
.overlay .overlay-wrapper .overlay-header>.text,
.overlay .overlay-wrapper .overlay-body {
padding: 15px 5px;
}
.overlay .overlay-wrapper .overlay-header>.trigger-close {
position: absolute;
width: 45px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 1.1rem;
font-weight: bold;
border: 0;
color: #fff;
background-color: #dc3545;
cursor: pointer;
border-top-right-radius: 4px
}
.overlay .overlay-wrapper .overlay-footer>.trigger-close {
float: right;
margin-bottom: 5px;
margin-right: 5px;
padding: 8px 15px;
color: #fff;
background-color: #007bff;
border: 0;
border-radius: 4px;
}
<button id="trigger">click me !</button>
<div id="fullscreen" class="overlay">
<div class="overlay-wrapper">
<div class="overlay-header">
<h3 class="text">Message heading</h3>
<button class="trigger-close">×</button>
</div>
<div class="overlay-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facere fugiat aperiam officiis debitis voluptas soluta assumenda cumque reiciendis blanditiis nostrum, consequuntur vero corporis doloribus! Expedita voluptatem illum maiores culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ex temporibus, possimus commodi, obcaecati nostrum maiores cupiditate voluptas voluptate unde qui quasi accusantium earum dolores pariatur fuga. Optio, officia praesentium.</p>
</div>
<div class="overlay-footer"><button class="trigger-close">close</button></div>
</div>
</div>
Learn more about flexbox (display: flex).
Hope I pushed you further.
I am trying to dynamically resize css grid layout boxes by dragging the column dividers (or resize placeholders) with the mouse.
I set resize: horizontal; on the nav element to resize, and it gets resized when I drag the small resize handle in the lower right corner of the element, but the width of the neighbouring column is not automatically adjusted which leads to overlap. Here is a broken codepen.
HTML:
<main>
<nav>#1</nav>
<header>#2</header>
<section>#3</section>
</main>
CSS:
main {
display: grid;
border: 3px dotted red;
grid-gap: 3px;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr;
height: 100%;
}
nav {
grid-column: 1;
grid-row: 1;
grid-row: 1 / span 2;
resize: horizontal;
overflow: scroll;
border: 3px dotted blue;
}
I expected the css grid engine to automatically handle this case but apparently it does not.
I experimented with jquery-ui resizable but it does not seem to work well with css grids.
I am looking into how to do it with jquery by setting the grid attribute grid-template-columns/rows: to a dynamic value but it is not clear how to catch the events thrown by resizing the element via the resize handle. The jquery resize event is only triggered on the window object, and not on dom elements.
What might be a way to do it without having to handle low-level mouse events like dragstart/dragend?
What you are looking to achieve is possible using only css. I've modified your example. The main takeaways are this:
Most importantly, try not to insert raw content in your semantic layout tags. Use header, paragraph, and list tags rather than text and br tags. This makes your code both easier to read and easier to reason about. Many of your problems happened because of how reflow is handled in grid areas.
Use grid-template to simplify your layout as it will make breakpoint reflow easier later on.
Use overflow: auto; along with specifying resize: vertical/horizontal. Without setting overflow, resize will fail.
Use min/max width/height values to create boundaries for resizing.
body {
margin: 10px;
height: 100%;
}
main {
display: grid;
border: 3px dotted red;
padding: 3px;
grid-gap: 3px;
grid-template:
"nav head" min-content
"nav main" 1fr
/ min-content 1fr;
}
nav {
grid-area: nav;
border: 3px dotted blue;
overflow: auto;
resize: horizontal;
min-width: 120px;
max-width: 50vw;
}
header {
grid-area: head;
border: 3px dotted orange;
overflow: auto;
resize: vertical;
min-height: min-content;
max-height: 200px;
}
section {
grid-area: main;
border: 3px dotted gray;
}
<main>
<nav>
<ul>
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</nav>
<header>
<h1>Header Title</h1>
<small>Header Subtitle</small>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
The solution is to not use explicit fixed column size (grid-template-columns: 200px 1fr;) but use instead relative column sizes such as grid-template-columns: 0.2fr 1fr; — then the grid CSS engine will handle the resizing of adjacent boxes. Next thing is to add nested divs inside the grid boxes, set their min-height/width to 100% and make them resizable via e.g. jqueryui resizable or whatever other library.
The fixed jsfiddle.
/* Javscript */
$('.left_inner').resizable();
$('.right_top_inner').resizable();
$('.right_bottom_inner').resizable();
/* CSS */
.grid {
display: grid;
grid-template-columns: 0.2fr 1fr;
grid-template-rows: 1fr 4fr;
grid-gap: 3px;
position: relative;
}
.left {
grid-row: 1 / span 2;
}
.right_top {
grid-column: 2;
grid-row: 1;
}
.right_bottom {
grid-column: 2;
grid-row: 2;
}
.left_inner {
background-color: #fedcd2;
padding: 0;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
text-align: center;
}
.right_top_inner {
background-color: #f9cf00;
padding: 0;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
text-align: center;
}
.right_bottom_inner {
background-color: #f8eee7;
padding: 0;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
text-align: center;
}
<!-- HTML -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<main class="grid">
<aside class='left'>
<div class="left_inner">
drag the bottom right handle to resize
</div>
</aside>
<section class="right_top">
<div class="right_top_inner">right_top_inner</div>
</section>
<section class="right_bottom">
<div class="right_bottom_inner">right_bottom_inner</div>
</section>
</main>
❗️ While this works in the simplest possible scenario, it gets problematic in a real life use case. I tried jquery-ui layout which worked somewhat better (here is a demo), but the lib is outdated and is glitchy with frames, so I went with angular-split-pane (based on angular 1) which works fine and is smaller in size. (update: it appears that the project is currently abandoned so probably not the best choice)
I'm using flexbox to display a blockquote and author/avatar horizontal to each other. This is within a slideshow (flexslider) but that doesn't seem to be the reason for the problem.
This works ok until we hit IE10. It appears to work fine in Chrome, Firefox, Opera, Safari, Edge and IE11.
The problem I'm having is the text is cut off at the end of the quote. If you don't see this at first you may have to resize your viewport. This may be caused by the padding I have at each side of the text to allow space for the custom open/close quotation marks.
Another issue in IE10 is that when the text is long (see "James Hetfield Longname" on the first quote) it doesn't wrap. This could be related to my other issue as I guess the text isn't wrapping correctly then either.
Here's some links to an example. I've include a CodePen and also a stripped back version of my HTML template.
CodePen: http://codepen.io/moy/pen/XdLELV
Template: http://moymadethis.com/flex/quote.html
Really hope someone can help with this!
Here's the code, as it's making my add something (though I don't think this wall off CSS/HTML is particually helpful myself)!
EDIT: I should add that I use Autoprefixer to popular the extra flex prefixes.
HTML:
<div class="flexslider">
<ul class="slides">
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
</ul>
</div>
CSS:
/* Base blockquote styles */
blockquote {
margin-bottom: $baseline*2;
overflow: hidden; // Fixes bug when inside flexslider when open/close quote-marks duplicate.
padding: $baseline $baseline 0 0;
p {
margin-bottom: $baseline/2;
}
> p {
color: $blue-light;
#include font-size(25);
line-height: $baselineheight/1.25;
font-weight: 300;
padding-left: 30px;
-webkit-font-smoothing: antialiased;
&:before,
&:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
&:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}
}
footer {
padding-left: 30px;
}
.name {
color: $blue;
display: block;
text-transform: uppercase;
}
}
/* Feature (avatar) quotes */
.feature-quote {
margin-bottom: $baseline;
padding-top: 5px;
}
.feature-quote footer p {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.feature-quote__cite {
margin-top: $baseline;
}
.feature-quote__avatar {
border: 5px solid $blue-lighter;
border-radius: 100%;
display: inline-block;
height: 60px;
margin-right: $baseline/2;
width: 60px;
}
/* Above 768px (Feature quote side-by-side */
#media only screen and (min-width: 768px) {
blockquote {
margin: 0 25px $baseline*2;
}
.feature-quote {
display: flex;
}
.feature-quote__text {
order: 2;
width: 66.66666%;
}
.feature-quote__cite {
display: flex;
align-items: center;
justify-content: center;
order: 1;
margin-top: 0;
padding-right: 30px;
width: 33.33333%;
}
.feature-quote__avatar {
height: 80px;
width: 80px;
}
.no-flexbox {
.feature-quote {
margin: 0 auto $baseline;
max-width: 800px;
}
.feature-quote__text,
.feature-quote__cite {
text-align: center;
width: 100%;
}
.feature-quote__cite {
p {
text-align: left;
}
}
}
}
Expanding upon Pete's comment about IE10 not properly supporting flexbox.
http://caniuse.com/#search=flex
Regarding IE10:
Only supports the 2012 syntax
Need the -ms- prefix
This answer actually has lots of information about flex in IE10: https://stackoverflow.com/a/21306343/2117156
Note I'm using autoprefixer so all -ms- prefixes are generated automatically. I will just note the prefix-less declarations here.
Adding the following line onto the paragraph did the trick flex: 0 1 auto;
I also had an issue where the text wouldn't wrap in the .feature-quote__cite container. I tried adding the above which didn't work. To fix this I had to add flex: 0 1 auto; directly onto the paragraph within rather than on the parent container .feature-quote__cite. Not ideal but it looks like it's done the trick.
As an aside, in IE11 the avatar image would get squashed when there wasn't enough horizontal space. I found adding flex-shrink: 0; to the image fixed this.
I want to change the content of div through javascript, but not just to one paragraph.suppose if I have three to four paragraphs,the text field should keep changing,with effect. I have written this code,but it changes only one paragraph.Its not changing again.It would also be good if it were depicted like the letter falls and content is in next letter.Please help
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function myFunction() {
document.getElementById("paraone").innerHTML="<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
}
</script>
<style>
body {
background: linear-gradient(#ccc, #fff);
font: 14px sans-serif;
padding: 20px;
}
.letter {
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 26px auto 0;
max-width: 550px;
min-height: 300px;
padding: 24px;
position: relative;
width:100%;
}
.letter:before, .letter:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.letter:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.letter:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}
</style>
<body>
<button type="button" onClick="myFunction()">Click</button>
<div class="letter">
<p>Dear Friends,</p>
<p id="paraone">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui,onvallis est pretium.</p>
</div>
</body>
</html>
Your question is unclear - but I think your aim is to append text, rather than replace.
document.getElementById("paraone").innerHTML = document.getElementById("paraone").innerHTML + "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
This will set the innerHTML of the element to "the inner HTML of the element, AND <marquee behavior='scroll' direction='left'>Hello World!</marquee>. It pretty much says, "set it to what is it at the moment, PLUS .....".
http://jsfiddle.net/daveSalomon/756yxaqh/
This approach isn't ideal - the marquee, for example, will be reset each time you append something new, as the entire content of the element is being replaced. A better way would be to insert a new element in the div.
var p = document.createElement("p");
p.innerHTML = "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
document.getElementById("paraone").appendChild(p);
http://jsfiddle.net/daveSalomon/756yxaqh/1/
BTW, if you're just starting out with JavaScript, it is worth being aware of jQuery. The second code snippet could be written as:
$('#paraone').append('<marquee behaviour="scroll" direction="left">Hello World!</marquee>');
So I'm working on this site http://wiafe.github.io/Love-Nonprofits/index.html and near the bottom there are divs that hold messages. And I would like to add an hover effect that will display two buttons and a link over it. And everything I have tried has failed so checking to see if there is a way to do it. I took out the html portions I had and kept the css classes. Have been messing with it all day and it's breaking my brain right now.
HTML:
<div class="message">
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br><span class="signature">Leaslie S.</span>
</a>
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. <br><span class="signature">Leaslie S.</span>
</a>
</div>
CSS:
.message-content:hover {
text-decoration: none;
}
.message-content p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: relative;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}
.message-content:hover small {
opacity: 0;
}
.message-content:hover .show-description p {
height: 100%;
}
.message-content .show-description small {
opacity: 1;
}
JS:
$('.message-content').hover(function() {
$(this).toggleClass('show-description');
});
Use this CSS:
.box > .appear {
opacity: 0;
transition: all 0.5s;
}
.box:hover > .appear {
opacity: 1;
}
Add class .appear to whatever you want to display on hover over .box.
JS Fiddle