Comment modifier le contenu sur hover

Question

Comment modifier le contenu sur hover

J'ai joué avec ça, et je pensais que ce serait assez simple. Ce que j'essaie de faire est de survoler l'étiquette "nouvelle". Une fois dans son état de survol, changez le contenu de ' NEW ' en ' ADD ' en utilisant uniquement CSS.

body{
    font-family: Arial, Helvetica, sans-serif;
}
.item{
    width: 30px;
}
a{
    text-decoration:none;
}
.label {
    padding: 1px 3px 2px;
    font-size: 9.75px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}
.label.success {
    background-color: #46a546;
}

.item a p.new-label span{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span{
  display: none;
}
.item:hover a p.new-label{
  content: 'ADD';
}

<div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div>

Voici un JSFiddle pour vous montrer avec quoi je travaille.

32

css css3 html

demandé sur TylerH 2013-09-27 23:14:26

4 réponses

score 50 · Answer 1

La propriété CSScontent ainsi que les pseudo-éléments ::after et ::before ont été introduits pour cela.

.item:hover a p.new-label:after{
    content: 'ADD';
}

JSFiddle Démo

score 9 · Answer 2

Cet exemple exact est présent sur la page des développeurs mozilla:

::après

Comme vous pouvez le voir, il vous permet même de créer des infobulles! :) Aussi, au lieu d'intégrer le texte réel dans votre CSS, vous pouvez utiliser content: attr(data-descr);, et le stocker dans data-descr="ADD" attribut de votre balise HTML (ce qui est bien parce que vous pouvez par exemple le traduire)

CSS content ne peut être utile qu'avec :after et :before pseudo-éléments, donc vous pouvez essayer de procéder avec quelque chose comme ceci:

.item a p.new-label span:after{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span:after {
  content: 'ADD';
}

Le CSS : après que le pseudo-élément correspond à un dernier enfant virtuel l'élément sélectionné. Généralement utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété content CSS. Cet élément est intégré par défaut.

score 4 · Answer 3

.label:after{
    content:'ADD';
}
.label:hover:after{
    content:'NEW';
}

<span class="label"></span>

score 3 · Answer 4

Ce petit et simple truc que je viens d'apprendre peut aider quelqu'un à essayer d'éviter :before OU :after pseudo éléments complètement (pour une raison quelconque) en changeant le texte sur hover. Vous pouvez ajouter les deux textes dans le HTML, mais varier la propriété CSS 'display' en fonction du survol. En supposant que le deuxième texte 'Add' a une classe nommée 'add-label'; voici une petite modification:

span.add-label{
 display:none;
}
.item:hover span.align{
 display:none;
}
.item:hover span.add-label{
 display:block;
}

Voici une démonstration sur codepen: https://codepen.io/ifekt/pen/zBaEVJ

Las etiquetas más populares

Comment modifier le contenu sur hover

4 réponses