Télécharger NeoFrag
Connexion

:hover comment ça fonctionne ?

60 vues
:hover comment ça fonctionne ?
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
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" !
Retour
2 participants
3 réponses
Gnesis

12 sujets, 71 réponses

Donateurs
Message non lu
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 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
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 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
voila le résultat du coup :


"N'arrêtez jamais d'apprendre" !
Retour