Activate CSS transition only when not in active state

Question

Activate CSS transition only when not in active state

I have a situation where I want to change the background color immediately upon hovering over an element, and then revert back to the original color when no longer hovering. The CSS for this is straightforward:

#el {
    background-color: black;
}
#el:hover {
    background-color: gray;
}

However, I'm facing a challenge in trying to achieve an instant color change on click (active state), followed by a smooth transition effect when releasing the click.

#el:active {
    background-color: green;
}

#el:hover:deactivate { /*this pseudo-class doesn't exist*/
    background-color: gray;
    transition: background-color 1s ease;
}

#el:deactivate { /*nor does this one*/
    background-color: black;
    transition: background-color 1s ease;
}

I've explored various options but haven't found a solution that allows me to apply the transition only on release without affecting hover behavior. Is there a way to accomplish this using pure CSS, without resorting to JavaScript?

css css-transitions

Answer 1

Answer №1

You could try using :not(:active) in your CSS.

#el:active {
    background-color: green;
}

#el:not(:active):hover {
    background-color: gray;
    transition: background-color 1s ease;
}

#el:not(:active) {
    background-color: black;
    transition: background-color 1s ease;
}

<a href="#" id="el">active</a>

Answer 2

You could try using :not(:active) in your CSS.

#el:active {
    background-color: green;
}

#el:not(:active):hover {
    background-color: gray;
    transition: background-color 1s ease;
}

#el:not(:active) {
    background-color: black;
    transition: background-color 1s ease;
}

<a href="#" id="el">active</a>

Answer 3

Answer №2

If you want to create a cool effect where the background changes on hover and the pseudo-element changes when active, you can achieve it by using the following CSS code:

#el {
  color: white;
  background-color: black;
  border: 1px solid white;
  height: 200px;
  width: 200px;
  position:relative;
  z-index:0;
}
#el:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  transition:1s;
}

#el:hover {
  background-color: gray;
}

#el:active::before {
  background: green;
  transition: 0s;
}

<div id="el">
  CONTENT HERE
</div>

Answer 4

If you want to create a cool effect where the background changes on hover and the pseudo-element changes when active, you can achieve it by using the following CSS code:

#el {
  color: white;
  background-color: black;
  border: 1px solid white;
  height: 200px;
  width: 200px;
  position:relative;
  z-index:0;
}
#el:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  transition:1s;
}

#el:hover {
  background-color: gray;
}

#el:active::before {
  background: green;
  transition: 0s;
}

<div id="el">
  CONTENT HERE
</div>

Activate CSS transition only when not in active state

Answer №1

Answer №2

Similar questions

Horizontal compression applied to background image

The challenges with implementing makeStyles in React Material UI

Approach to Using Bootstrap 4 with Intl-Tel-Input

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

Tips for changing the text color to stand out from the color of the input field

Can Selenium be used to retrieve a list of pinned IDs from a website?

Can a drop shadow be achieved using only CSS3 without any additional tools or techniques?

Mobile devices cause CSS drop shadows to malfunction | Next.js

Create personalized styles for each item within a stack with specific spacing using the @mui library

Align elements on the left side with some space between them

Struggling to get the nth-child selector to function properly in IE8

Utilizing Sass variables and customizing CSS styles within the main stylesheet

What is the best way to adjust a <div> element so that it stays centered on the webpage while also keeping its size attributes intact?

The background image and svgs are not displayed on laravel localhost/public/index.php, but they appear when using "php artisan serve"

Incorporating text sections into a div container and adjusting the width

Tips for managing the dimensions of the <label> element within a React component

Issues are arising with CSS .not(selector) functionality when applied to a span element

Images in Chrome are shivering when animated at unconventional positions