0

Is it possible to exclude a pseudo-class having the same property as another pseudo-class from being transitioned? Please look at the following example code for your reference:

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>

What if I want to have the transition to be applied on the :hover pseudo-class but not on the :focus pseudo-class?

Demo on JSFiddle

Srishti Gupta
  • 1,155
  • 1
  • 13
  • 30

2 Answers2

1

You can add transition: none; on :focus

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 move the transition: all 1s ease-in 500ms; in the :hover section but you will still need the transition: none; on :focus because :focus only happens when you also :hover

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>
caramba
  • 21,963
  • 19
  • 86
  • 127
  • Thank you for your solution. The one for which the code snippet is provided works perfectly fine. However moving the `transition` property inside `:hover` makes the element transition out instantaneously unlike the beginning of the transition. Additionally, in a general sense, we can `:focus` on an element without `:hover`. Another SO thread that explains why - https://stackoverflow.com/questions/6143782/differences-between-css3-hover-and-focus. – Srishti Gupta Jan 19 '21 at 13:59
1

Try applying the transition property 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>
sbgib
  • 5,580
  • 3
  • 19
  • 26
  • If I'm interpreting it correctly, `button:not(:focus)` will select all pseudo-classes on `button` except `:focus` and will apply the relevent CSS properties written inside its block. Suppose I have 4 pseudo-classes - A, B, C, D, out of which, I want to apply transition to A & B but not to B & C. Will a similar approach work if I had multiple pseudo-classes to be excluded for transition? – Srishti Gupta Jan 19 '21 at 14:04
  • [:not()](https://www.w3schools.com/cssref/sel_not.asp) just means 'in all cases other than this one', so it would also work when no pseudo-classes apply. To your point, you would simply exclude what you want to exclude: `button:not(:B):not(:C)`. – sbgib Jan 20 '21 at 07:59