How Can I Make a CSS Hover State Persist After the Mouse Moves Away?

Maintaining CSS Hover State Post-Hover

In web design, the hover state allows elements on a page to transform when a user hovers over them. However, in some cases, it's desirable for the hover state to persist even after the user's mouse leaves the element.

Consider the following code snippet:

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

#about:hover #onabout {
  display: block;
}

This code uses the :hover pseudo-class to display an element (#onabout) when the mouse hovers over another element (#about). However, when the user moves the mouse away from #about, #onabout disappears.

To make the hover state persist, CSS provides several options. One approach is to introduce a transition property:

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

This code adds a smooth transition effect when hovering over and moving away from #about. The opacity property is also modified to ensure that #onabout remains visible after the mouse leaves #about.

Another approach involves using the :active pseudo-class:

#about {
  ...
  cursor: pointer;
}

#about:hover #onabout {
  display: block;
}

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

This code adds a cursor to indicate that #about is clickable and uses :active to maintain the hover state when the element is clicked. The transition ensures a seamless visual experience.

Finally, for those seeking a more advanced solution, CSS3 provides the animation-play-state property:

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

This code introduces an animation with the @keyframes hover declaration and pauses it by default. When the user hovers over #about, animation-play-state is set to running, starting the animation and maintaining the hover state even after the mouse leaves the element.

The above is the detailed content of How Can I Make a CSS Hover State Persist After the Mouse Moves Away?. For more information, please follow other related articles on the PHP Chinese website!