Comment appliquer :after Effects aux éléments :hover en CSS ?

Comment combiner efficacement :after et :hover

Lors de l'utilisation de CSS, il est possible de combiner les pseudo-sélecteurs :after et :hover pour créer des effets dynamiques. Cependant, y parvenir peut s'avérer difficile.

Considérez le code fourni, où une liste est améliorée avec une classe sélectionnée qui ajoute une forme de flèche à l'aide de :after. Le but est d'appliquer la même forme de flèche aux éléments survolés.

#alertlist {
  list-style: none;
  width: 250px;
}

#alertlist li {
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}

#alertlist li.selected,
#alertlist li:hover {
  color: #f0f0f0;
  background-color: #303030;
}

#alertlist li.selected:after {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #303030;
  content: "";
}

Pour combiner l'effet :after avec :hover, ajoutez simplement :after au sélecteur #alertlist li:hover dans le de la même manière que pour #alertlist li.selected :

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

En faisant cela, la forme de la flèche apparaîtra désormais sur les éléments de la liste avec la classe sélectionnée et sur les éléments survolés.

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!