Do not apply transitions to a pseudo-class in CSS

Question

Do not apply transitions to a pseudo-class in CSS

Can a pseudo-class with the same property as another pseudo-class be prevented from being transitioned? Take a look at this example code:

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}

<button class="transition">Submit</button>

If I only want the transition to apply to the :hover pseudo-class and not the :focus pseudo-class, is it possible?

Check out the Demo on JSFiddle

css css-selectors css-transitions

Answer 1

Answer №1

To remove the transition effect on focus, simply add transition: none; within the :focus section

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
  transition: none;
}

<button class="transition">Submit</button>

You can also consider moving the

transition: all 1s ease-in 500ms;

to the :hover section, but remember to keep the transition: none; in the :focus section since :focus only occurs when you are also hovering over the element.

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:hover {
  background-color: black;
  transition: all 1s ease-in 500ms;
}

button:focus {
  background-color: green;
  transition: none;
}

<button class="transition">Submit</button>

Answer 2

To remove the transition effect on focus, simply add transition: none; within the :focus section

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
  transition: none;
}

<button class="transition">Submit</button>

You can also consider moving the

transition: all 1s ease-in 500ms;

to the :hover section, but remember to keep the transition: none; in the :focus section since :focus only occurs when you are also hovering over the element.

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:hover {
  background-color: black;
  transition: all 1s ease-in 500ms;
}

button:focus {
  background-color: green;
  transition: none;
}

<button class="transition">Submit</button>

Answer 3

Answer №2

Consider adding the transition effect to button:not(:focus):

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:not(:focus) {
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}

<button class="transition">Submit</button>

Answer 4

Consider adding the transition effect to button:not(:focus):

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:not(:focus) {
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}

<button class="transition">Submit</button>

Do not apply transitions to a pseudo-class in CSS

Answer №1

Answer №2

Similar questions

Maintain correct aspect ratio when zooming in the body

Modifying button appearance based on state change in AngularJS

Custom Angular directive for collapsing sub menus with CSS

What is the reason for the presence of white space surrounding the div element

Tips for utilizing string interpolation in the style tag of an Angular component

Arrangement of images in an array

Expand Elements to occupy entire width

creating an interactive element that seamlessly integrates with a dynamic background image slideshow

How can I alter the color of the top bar in Foundation framework?

Text overlapping when viewed on a mobile device

Unable to add node module into the project

Alignment of labels at the same height in Bootstrap 4 forms

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

Using Bootstrap to Position DIVs at the Top, Middle, and Bottom

Customize your Bootstrap panel with a user-friendly wysiwyg editor

Choose the selectize item to always move to the front

Is it possible to attach the entered URL to an image following the text that has been inputted?

Ensuring only one group is open at a time in jQuery when a new group is opened

Troubleshooting compatibility problems between jQuery UI Sortable and a responsive Bootstrap 5 page

Aligning thumbnail images in a jQuery Mobile listview