Changing the background color of a div after a mouse click

Question

Changing the background color of a div after a mouse click

Recently, I attempted to change the background color of a div after clicking it using only CSS. I experimented with :visited, :focus, and .visited classes in CSS, but unfortunately, none of these methods worked. I am wondering if there is a solution to apply a background color to a div after clicking on it using just CSS, with no hover effect involved.

html css

Answer 1

Answer №1

If you're not familiar with javascript, here's a simple solution for you.

<div style="background-color: green;" onclick="this.style.background='yellow'">
<p>Click here to change the color from GREEN to YELLOW</p>
</div>

Answer 2

If you're not familiar with javascript, here's a simple solution for you.

<div style="background-color: green;" onclick="this.style.background='yellow'">
<p>Click here to change the color from GREEN to YELLOW</p>
</div>

Answer 3

Answer №2

One clever solution using only CSS involves the checkbox hack

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

div {
  position: relative;
}

label {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

input[type=checkbox]:checked ~ div {
  background: magenta;
}

<input type="checkbox" id="checkMeOut">
<div>
  <label for="checkMeOut">test</label>
  i will change background-color
</div>

First, set up the HTML (checkbox input, the div you want to change, inside the div add a label linked to your checkbox)

Second, in the CSS, hide the checkbox in any way you want.

Position the label absolutely, giving it a height and width equal to the div's dimensions so when you click anywhere on the div, you click on the label and thus activate the checkbox giving it :checked status

Then, using the general sibling connector ~, give any style you want to the div

Let me know if it works for you

Answer 4

One clever solution using only CSS involves the checkbox hack

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

div {
  position: relative;
}

label {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

input[type=checkbox]:checked ~ div {
  background: magenta;
}

<input type="checkbox" id="checkMeOut">
<div>
  <label for="checkMeOut">test</label>
  i will change background-color
</div>

First, set up the HTML (checkbox input, the div you want to change, inside the div add a label linked to your checkbox)

Second, in the CSS, hide the checkbox in any way you want.

Position the label absolutely, giving it a height and width equal to the div's dimensions so when you click anywhere on the div, you click on the label and thus activate the checkbox giving it :checked status

Then, using the general sibling connector ~, give any style you want to the div

Let me know if it works for you

Answer 5

Answer №3

You can achieve this effect in CSS by utilizing the :target pseudo-class:

[id="bar"] {
   width: 8em;
   height: 8em;
   background-color: blue;
   transition: 200ms;
}

[id="bar"]:target {
  background-color: yellow;
}

<a href="#bar">
  <div id="bar"></div>
</a>

Answer 6

You can achieve this effect in CSS by utilizing the :target pseudo-class:

[id="bar"] {
   width: 8em;
   height: 8em;
   background-color: blue;
   transition: 200ms;
}

[id="bar"]:target {
  background-color: yellow;
}

<a href="#bar">
  <div id="bar"></div>
</a>

Answer 7

Answer №4

Here's a simple tip for you:
1- Assign an id or class to the div.

<div class="my-div">lorem ipsum</div>

2- Use the id or class to target the div when a click event occurs in your JavaScript file.
3- Feel free to customize as needed :)

$('.my-div').on('click', function () {
  $(this).css('background-color', 'yellow');
});

Hope this tip comes in handy, best of luck! :)

Answer 8

Here's a simple tip for you:
1- Assign an id or class to the div.

<div class="my-div">lorem ipsum</div>

2- Use the id or class to target the div when a click event occurs in your JavaScript file.
3- Feel free to customize as needed :)

$('.my-div').on('click', function () {
  $(this).css('background-color', 'yellow');
});

Hope this tip comes in handy, best of luck! :)

Changing the background color of a div after a mouse click

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Styling a modal popup using session storage in CSS

Alt and title attributes for images are getting mixed up when there is a space in between

I want to utilize a select drop-down menu for navigating between pages in my pagination, breaking away from the traditional method of using <a> tags

Show a table when a button is clicked using Javascript

JavaScript alert box

How to turn off the default print media query in Zurb Foundation 5 without relying on SASS

Improve the parallax effect in your React component

What is the best way to extract the innerHTML of every button and exhibit it in a text box?

Iterating through an SVG path multiple times

Is the button not aligned properly with the email input field?

How can I make an image fill the container with CSS zoom effect

Enhancing the Syntax of If and If Else in Jquery Functions

Can you identify the language of this HTML include code snippet?

Crop images in a canvas using a customized rectangle with the help of JQuery

Is the accept attribute of the input not recognizing application/json as a valid input type?

Resetting JavaScript Input based on certain conditions

Use Onblur and Onfocus events in an input field that is read-only

What is the best way to position a bigger character directly above a smaller container?

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

What is the best way to showcase a div on top of all other elements in an HTML page?