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

Simplified jQuery function for multiple div mouseover operations

Guiding the jQuery Document

Tips on creating a blurred background effect when an HTML popup modal is activated

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

Struggling with CSS, seeking improvements to align with my previous coding style

Checkbox enabled Bootstrap image

Are there any reliable sources for a complete list of browser CSS properties?

Initiate an animation upon reaching a designated element using Jquery scroll event

Utilize CSS for defining columns within a layout

The collapsible section expands upon loading the page

An easy way to create a hover effect on a URL link and dynamically change the

Footer displaying page numbering

Creating a loader for a specific component in Angular based on the view

Only referring to a CSS class within a particular element

Struggling to align the header of a column to the center in a mat-table that is sortable?

Steps to include a horizontal divider in the footer section of an angular-material table

Refrain from showing content beneath a certain element

Maintain the div's aspect ratio by adjusting its width according to its height

What is the best way to create a floating navigation bar that appears when I tap on an icon?

Enhancing Animation Speed with jQuery