It is important for the CSS :active state to transition to an "inactive" state after a certain period of

Question

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

For mobile, I utilized the :hover and :active pseudo-classes to create a transition effect when tapping on a tab that enlarges the elements for more information. However, I am seeking a way for the activated element to return to its original state after a certain period of time has passed. I have not been able to find a similar query.

Edit: It seems that the element remains in a "hovered" state permanently. I would like it to stop being hovered after a few seconds.

Edit2: http://jsfiddle.net/qw8vyrxd/

.box {
width: 40px;
height: 40px;
background-color: red;
}

@media screen and (max-width: 1000px){
.box:hover, .box:active{
width: 60px;
height: 60px;
}
}

On mobile devices, clicking on the red square causes it to expand due to the hover selector, but it does not shrink back unless the page is reloaded. I am looking for a solution where the hover effect only lasts for a couple of seconds.

Thank you

css hover

Answer 1

Answer №1

When using a touch screen, the state that remains on the element is :hover instead of :active. The :hover state persists until the user interacts elsewhere on the screen.

To address this issue, I applied the :hover style only to devices that support it by utilizing media queries like media queries hover:hover. For elements in :active state, no media queries were used as they would remain active as long as the user's finger is on the screen.

.box {
  width: 40px;
  height: 40px;
  background-color: red;
}

.box:active {
  width: 60px;
  height: 60px;
}

@media (hover: hover) {
  .box:hover {
    width: 60px;
    height: 60px;
  }
}

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

This approach effectively addressed the issue on my devices. Testing with real devices was necessary since DevTools tended to behave like a mouse even during simulated touch interactions.

Modified Approach

Given the difficulty of controlling pseudo states with JavaScript, I opted for a CSS-only solution. By setting the transition to 0s and then introducing a transition-delay of 2s, I implemented a workaround to make the element appear larger for a brief period on touch screens before reverting to its original size.

.box {
  width: 40px;
  height: 40px;
  background-color: red;
  transition: 0s height, 0s width;
  transition-delay: 2s;
}

.box:active {
  width: 60px;
  height: 60px;
  transition-delay: 0s;
}

@media (hover: hover) {
  .box {
    transition-delay: 0s;
  }
  .box:hover {
    width: 60px;
    height: 60px;
    transition-delay: 0s;
  }
}

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

Answer 2

When using a touch screen, the state that remains on the element is :hover instead of :active. The :hover state persists until the user interacts elsewhere on the screen.

To address this issue, I applied the :hover style only to devices that support it by utilizing media queries like media queries hover:hover. For elements in :active state, no media queries were used as they would remain active as long as the user's finger is on the screen.

.box {
  width: 40px;
  height: 40px;
  background-color: red;
}

.box:active {
  width: 60px;
  height: 60px;
}

@media (hover: hover) {
  .box:hover {
    width: 60px;
    height: 60px;
  }
}

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

This approach effectively addressed the issue on my devices. Testing with real devices was necessary since DevTools tended to behave like a mouse even during simulated touch interactions.

Modified Approach

Given the difficulty of controlling pseudo states with JavaScript, I opted for a CSS-only solution. By setting the transition to 0s and then introducing a transition-delay of 2s, I implemented a workaround to make the element appear larger for a brief period on touch screens before reverting to its original size.

.box {
  width: 40px;
  height: 40px;
  background-color: red;
  transition: 0s height, 0s width;
  transition-delay: 2s;
}

.box:active {
  width: 60px;
  height: 60px;
  transition-delay: 0s;
}

@media (hover: hover) {
  .box {
    transition-delay: 0s;
  }
  .box:hover {
    width: 60px;
    height: 60px;
    transition-delay: 0s;
  }
}

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

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

Answer №1

Modified Approach

Similar questions

Move divs that are currently not visible on the screen to a new position using CSS animations

Displaying the second div once the first div has loaded, then concealing the first div

What is the best way to organize divs in a grid layout that adapts to different screen sizes, similar to the style

Having trouble with the jQuery toggle functionality not working as expected

Tips for enhancing a table with extra functionality in Angular 6

Customize bullet list icons to adjust in size based on content using css

Here, it is possible for the padding-right value to be equal to zero

Resize drop zone with drag and drop functionality

Issue with Material UI Menu positioning incorrectly when button is aligned to the right or left

Issue with Bootstrap 5 Card Header not extending to full width

Loading screen featuring an outlined blueprint of design elements

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

Discovering the proper method to reach the parent element in jQuery while within the click event

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

After following the official guide, I successfully installed Tailwind CSS. However, I am facing issues with utilizing the `bg-black` className for styling the background,

Rails pagination will only show the link to the current page

How can I eliminate the border appearance from a textfield fieldset component in Material-UI?

The division is now appearing below the preceding division instead of following it

Position a div to float in the top right corner without overlapping its sibling header

Layers of CSS images