Bonjour

j'ai un div et lorsque je passe la souris dessus il se déplace à droite et cet div contient un autre div qui contient une flèche cette flèche je veux q'elle tourne de 180° quand le div se déplace

le problème c'est qu'on je passe la souris au dessus d'elle elle tourne (un demi tour)mais elle ne reste pas et elle revient à ça place

j'espère que vous m'avez compris

Merci pour votre aide

HTML:

<div id="menu">
        <div >
        <div id="menu-cercle" style="color: #fff;"><i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i></div><p style="text-align: center;"><img src="img/logo.png" style="position: absolute; top:10px;right: 25%; zoom: 0.8;"></p></div>

                <ul>
                        <li>Accueil</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li>Nous contacter</li>

                </ul>
        </div>

css:

#menu{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: -250px;
	width: 250px;
	height: auto;
	background: url('../img/header_background.png') /*#0c4724*/;
	transition: transform 0.5s;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#menu:hover{
	transform: translateX(250px);
}
#menu-cercle{
	width: 50px;
	height: 50px;
	position: relative;
	top: 15px;
	left: 100%;
	border-top-right-radius: 100000%;
	border-bottom-right-radius: 100000%;
	/*cursor: pointer;*/
	background: url('../img/header_background.png')/*#0c4724*/;
	transition: transform 0.5s;
}
#menu-cercle:hover{
	width: 50px;
	height: 50px;
	position: relative;
	top: 15px;
	left: 100%;
	border-top-right-radius: 100000%;
	border-bottom-right-radius: 100000%;
	/*cursor: pointer;*/
	background: url('../img/header_background.png')/*#0c4724*/;
	transform: rotate(180deg);
}
a{
	text-decoration:none;
}
i{
	position:relative;
	left: 15%;
	top: 18%;
}

merci pour votre aide 

-
Edité par H1800 21 août 2017 à 18:58:25

Salut,

En fait tu as mis l'effet de rotation sur le hover de la flèche elle-même. Du coup le menu sors, tu n'es plus sur la flèche, et elle reprend sa position initiale.

A la ligne 28 de ton css, si tu remplaces en mettant #menu:hover #menu-cercle ça devrait faire ce que tu souhaites.

Salut, 

Qu'est-ce que ça donne si tu fais :

animation-fill-mode: forwards;

Sur

#menu-cercle:hover

-
Edité par me_moi 23 août 2017 à 0:04:46

Bonjour

Merci pour vous 

J'ai réussi