Laden Sie NeoFrag herunter
Anmelden

:hover comment ça fonctionne ?

60 Ansichten
:hover comment ça fonctionne ?
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
Bonjour ou bonsoir à tous,

Aujourd'hui je viens demander de l'aide envers la communauté de NeoFrag ;)
Je suis actuellement en développement d'un site web, j'ai des lacune a combler en css est j'aimerais savoir si c'est possible de faire un :hover d'une div exemple #test :

#test {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:70px;
height:70px;
margin-left: 23%;
margin-top: 14%;
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
}

résultat :


avec mon :hover "fait sur photoshop" :

C'est le résultat que je cherche mais je sais pas du tout comment mi prendre avec le :hover :/

Même si vous n'avez pas des compétences de ouff ou autres.. une idée ou autres et la bienvenue !
"N'arrêtez jamais d'apprendre" !
Rückkehr
2 Teilnehmer
3 Antworten
Gnesis

12 Fach, 71 Antworten

Geber
Ungelesene Nachricht
Alors, pour ton hover rien de très complexe.

Pour avoir ton "modifier" en hover, il suffit de faire une nouvelle div dans la div de l'avatar, que tu met en forme mais ça tu devrais pouvoir gérer, ensuite tu ajoute juste un display:none; à la div créée et tu fais en sorte que quand on passe la souris sur la div avatar, ça affiche ta nouvelle div.

Exemple:

Html:
<div class="avatar">
<div class="modifier_avatar">
</div>
</div>

Css:
.avatar {
ton css
}
.modifier_avatar {
display: none;
}
.avatar:hover .modifier_avatar {
display: block;
}
French Family
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
merci j'ai cherché se soir de mon côté j'ai trouvé une solution qui doit encore être amélioré qui par d’ailleurs du même principe que se que tu me dit !
"N'arrêtez jamais d'apprendre" !
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
voila le résultat du coup :


"N'arrêtez jamais d'apprendre" !
Rückkehr