Bonsoir,
Dans le but de réaliser une petite roue avec une flèche au millieu qui pointe vers le cercle sur lequel notre sourie est. :
Par exemple si ma sourie passe sur le premier cercle, la flèche tourne jusqu'au 1
Je veux donc utiliser la propriété rotate de transform.
Et j'utilise aussi le petit
.div1:hover .div2{
}
Sauf que pour utiliser cette propriété du CSS il faudrait que div2 soit dans div1.
Ce n'est pas mon cas. Et je ne peux pas le faire.
Voici mes codes :
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Menu tournant</title>
<meta charset="UTF-8">
</head>
<body>
<div class="menu">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>
<div class="box6">
</div>
<div class="box7">
</div>
<div class="box8">
</div>
<img src="arrow.png" class="img-menu">
</div>
</body>
</html>
CSS
.menu{
top:50%;
left:50%;
position: absolute;
transform:translateX(-50%) translateY(-50%);
padding:100px;
}
.img-menu{
width:70px;
transform:rotate(0deg);
}
.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8{
border-radius:50px;
background-color:#c0392b;
height:50px;
width:50px;
}
.box1{
position: absolute;
top:10px;
left:10px;
background-color:#2980b9;
}
.box1:hover .box2{
background-color:#fff;
border:1px solid #000;
}
.box2{
position: absolute;
top:10px;
left:110px;
}
.box3{
position: absolute;
top:10px;
right:10px;
background-color:#2980b9;
}
.box4{
position: absolute;
top:100px;
right:10px;
}
.box5{
position: absolute;
bottom:10px;
right:10px;
background-color:#2980b9;
}
.box6{
position: absolute;
bottom:10px;
right:100px;
}
.box7{
position: absolute;
bottom:10px;
left:10px;
background-color:#2980b9;
}
.box8{
position: absolute;
left:10px;
bottom:100px;
}
Auriez-vous donc une solution ?