Skip to content
Fix Code Error

Can I have an onclick effect in CSS?

March 13, 2021 by Code Error
Posted By: Anonymous

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)?

Solution

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.

Answered By: Anonymous

Related Articles

  • Fix top buttons on scroll of list below
  • Active tab issue on page load HTML
  • How to show title in hover - css / jquery
  • Onclick, the button moves down, why can that due to?
  • How to VueJS router-link active style
  • Having trouble with my nav bar/header, It used to…
  • How do i update a javascript variable as its value changes?
  • Is it possible to apply CSS to half of a character?
  • After a little scroll, the sticky navbar just is not…
  • Javascript and css animation
  • VueJS - v-bind:style + hover
  • Navbar not filling width of page when reduced to mobile view
  • don't know what went wrong nav bar with Tailwind CSS…
  • Not submit any value if checkbox is empty
  • Ukkonen's suffix tree algorithm in plain English
  • Why my "title" bloc doesn't go to bottom?
  • Hide navigation arrows depending on the active class…
  • How to vertically align an image inside a div
  • custom text position on ipywidgets button
  • How do I keep only the first map and when the game…
  • Hide one dropdown in side menu when another opens
  • CSS not applied to Polymer 2 web component in Chrome
  • VueJS masonry layout
  • How to Fix hover not working after JS script…
  • Change image and add class for active menu/button
  • What is the opposite of :hover (on mouse leave)?
  • Hidden property of a button in HTML
  • Calculator: Back key doesnt work in Javascript
  • Drop-down menu that opens up/upward with pure css
  • Javascript validate all checkboxes are selected
  • Using CSS to make a sliding transition out of another DIV
  • Is it possible to use jQuery .on and hover?
  • In Ember, how do I create a component that reacts to…
  • How to implement a Navbar Dropdown Hover in Bootstrap v4?
  • Polymer 1.x: Formatting
  • Maximum XOR With an Element From Array | Leetcode
  • When I use '/js/app.js' on my Laravel view my…
  • jQuery.on() Delegation: Slightly complex selector…
  • insert tables in dataframe with years from 2000 to…
  • How does PHP 'foreach' actually work?
  • Content showing over the top of tooltip
  • How to group array of objects by common property and…
  • Do not close the mode in the mouse up event
  • CSS gradient animation degree change
  • Black transparent overlay on image hover with only CSS?
  • VueJS - Conditional component mouse events
  • Change navbar color in Twitter Bootstrap
  • How to loop through all the buttons to a click event…
  • Why doesnt my table sort my div variable in numerical order?
  • HTML5 Canvas Resize (Downscale) Image High Quality?
  • Individual click handlers in v-for loop
  • Sort table rows In Bootstrap
  • How to use html template with vue.js
  • Open a column of buttons when another button is…
  • CSS Input with width: 100% goes outside parent's bound
  • Lagging/Stutter performance box shadow based on…
  • vue js cant understand keep alive
  • Pandas pivot_table: filter on aggregate function
  • React Multi-level push menu SCSS Back button not working
  • Image Greyscale with CSS & re-color on mouse-over?
  • Get the contents of a table row with a button click
  • Real mouse position in canvas
  • Adding multiple dropdown menu's next to each other…
  • How to create a Carousel in NextJS?
  • Adobe XD to responsive html
  • Can I disable a CSS :hover effect via JavaScript?
  • center 3 items on 2 lines
  • Trying to keep dropdown menus flush to the edge of…
  • Smart way to truncate long strings
  • Vuetify Navigation Drawer works once then stops
  • Is it possible to move my text side by side with my icon
  • How to add fade animation for this tab
  • showing record text with red color when click stop button
  • Vue: How can you tell whether the control key is…
  • In CSS Flexbox, why are there no "justify-items" and…
  • Changing an image with a dropdown, only works with…
  • Jquery fadeToggle Trouble
  • Centering in CSS Grid
  • Is Observables is also executed in the same way like…
  • How to make the overflow CSS property work with…
  • Detect IF hovering over element with jQuery
  • Decreasing height of bootstrap 3.0 navbar
  • Keypress in backbone.js?
  • Onclick event not running on first button click in Mithril
  • JavaScript: Check if mouse button down?
  • Resizing an image in an HTML5 canvas
  • Javascript text animation not triggering
  • Bootstrap - center child when parent isn't centered…
  • SQL find sum of entries by date including previous date
  • Polymer 1.0: How do I remove white space around in ?
  • Changing image on hover with CSS/HTML
  • JavaScript gives NaN error on the page but variable…
  • How to extract img src, title and alt from html using php?
  • Class combination not applying new style
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • Vertically align an image inside a div with…
  • Simple Popup by using Angular JS
  • Twitter Bootstrap Datepicker within modal window
  • How do you get string interpolation working on a…
  • How to change the color of vaadin-select-text-field…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

@Media min-width & max-width

Next Post:

How to insert a line break in a SQL Server VARCHAR/NVARCHAR string

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error