How to style object when the user clicks it


Tags: html,css

Problem :

In css for the links I can style the as before user clicks and after user clicks. But how can I do this for simple text or an object that when a user clicks that object then change its color. For Example

<style>
.object:onmouseclick {
background-color:green;
padding:5px; 
}
</style>

What we have to write in place of onmouseclick.



Solution :

If you were styling a link you would use :active or :focus but as you're using this on a dom element, you would have to use jQuery to add a class to the clicked item and apply the style through that class...

$('.object').click(function() {
  $(this).toggleClass('clicked');
});
.object {
  background-color: green;
  padding: 5px;
  cursor: pointer;
  width: 300px;
  color: orange;
}
.object.clicked {
  background-color: blue;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="object">
  <h1>The Mutants Are Revolting</h1>
  <p>Bender?! You stole the atom. That's the ONLY thing about being a slave. I am Singing Wind, Chief of the Martians. Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p>

</div>


    CSS Howto..

    How to align an icon to the right of content

    How to continue CSS list on new page?

    how to combine widget webapp framework with SEO-friendly CSS and JS files

    How to make image scale as per browser window?

    How to make a multi category filter with JQuery, HTML and CSS

    How do I spilt the footer into different widths?

    show div border when link is clicked

    How to create CSS with 2 loops

    How is CSS linked to [closed]

    How do I combine two columns with different formatting?

    How to create border between two divs with dynamically changing heights?

    How to get rid of this whitespace in internet explorer?

    How to make a jQuery step animation?

    how to disable one header among of multiple headers in jQuery table sorter

    How to write this CSS-Selector (Target img from previous Anchor-Tag)

    How to style JavaScript created text using CSS's @font-face

    CSS: How to limit length of the border-bottom div?

    How to replace inline text with images using CSS

    How to convert this CSS to SASS (arithmetics in selector)?

    How to override background of Bootstrap Material Design theme?

    How to center the boxes as shown?

    How to specify a flex item to be of certain minimum width?

    does anyone know how to do this css transition? [closed]

    How do i make div go under another div making columns

    How to expand textarea to fit text vertically and horizontally?

    How to horizontally align a list of contacts?

    How to place a div on right side of cascading tables - CSS

    How to set link color inside GridView cell

    How can I set CSS only for specific IE browsers?

    how to make this “div” always visible to users