Comment puis-je faire en sorte qu'un effet de survol CSS persiste après la fin du survol ?

Faire persister l'état de survol du CSS après la fin du survol

Lorsque vous survolez un élément avec CSS, vous souhaiterez peut-être que les modifications restent visibles même après avoir arrêté le survol. Ce problème peut survenir lors de l'utilisation de la fonction de survol CSS pour révéler une image en survol.

Solution CSS :

Une solution efficace consiste à utiliser la propriété de délai de transition. Cette propriété ajoute un délai à la transition d'un état à un autre, permettant à l'image de rester visible après le survol. Voici un exemple :

div img {
    position: absolute;
    opacity: 0;
    transition: 0s 180s;
}

div:hover img {
    opacity: 1;
    transition: 0s;
}

Dans ce code, la transition de l'opacité 0 à l'opacité 1 est retardée de 180 secondes, garantissant que l'image reste visible pendant une période significative après la fin du survol.

Considérations supplémentaires :

• Vous pouvez ajuster la valeur du délai de transition pour contrôler la durée de visibilité de l'image après le survol.
• Vous pouvez également utiliser des techniques alternatives, comme régler l'opacité à 0,99 au lieu de 1 pour créer un effet semi-transparent.
• Si vous avez besoin de fonctionnalités plus complexes, envisagez d'utiliser JavaScript ou jQuery pour gérer les changements d'état de survol.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!