Is there a way to deactivate a hover effect once it has been clicked on?

Question

I am in need of a CSS code that resembles the following:

div:hover {
 apply hover effect
}

div:onclick{
 trigger click event
 disable hover
}

The main objective is to deactivate the hover effect for ALL elements once I have selected one.

Answer 1

Answer №1

You can utilize the :active pseudo-class to style buttons.

button {
  cursor:pointer;
  outline:none;
  border:none;
}

button:hover {
  background:#ff9900;
}

button:active {
  background:red;
}

<button>Submit</button>

If you desire the styling to persist after clicking on the button, then you should use the :focus pseudo-class.

button {
  cursor:pointer;
  outline:none;
  border:none;
}

button:hover {
  background:#ff9900;
}

button:focus {
  background:red;
}

<button>Submit</button>

Answer 2

You can utilize the :active pseudo-class to style buttons.

button {
  cursor:pointer;
  outline:none;
  border:none;
}

button:hover {
  background:#ff9900;
}

button:active {
  background:red;
}

<button>Submit</button>

If you desire the styling to persist after clicking on the button, then you should use the :focus pseudo-class.

button {
  cursor:pointer;
  outline:none;
  border:none;
}

button:hover {
  background:#ff9900;
}

button:focus {
  background:red;
}

<button>Submit</button>

Answer 3

Check out this implementation for removing a class from a div using JavaScript after clicking:

 var box = document.querySelector(".box")

    box.addEventListener("click", function () {
        box.className = "";
    })

.box:hover {
    background-color: green;
}

 <div class="box">CONTENT</div>

Answer 4

Check out this implementation for removing a class from a div using JavaScript after clicking:

 var box = document.querySelector(".box")

    box.addEventListener("click", function () {
        box.className = "";
    })

.box:hover {
    background-color: green;
}

 <div class="box">CONTENT</div>