Discussion :

[arwin]

Bonjour,
je veux animer une icône (cheked) qui se trouve dans une div box. J'utilise Sass. J'ai écris ce code mais ça ne marche pas .. l’icône tourne quand je rafraichi la page mais le hover ne fonctionne pas.

L’icône est en float et en position absolute ainsi que le box. L'icone est adjacente à la box.

Merci pour votre aide

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
                <div class="restaurants">
                    <div class="box"></div>
                    <div class="check">
                        <img src="img/check24.png" alt="#">
                    </div>
                    <h3>Citrus Squid Carpaccio</h3>
                    <p>with orange zest</p>
                    <img class="heart " src="img/heart-30.png" alt="#">
                </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.box {
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background-color: $btn_new;
    border-radius: 4px;
    display: block;
    cursor: pointer;
 
    &:hover + .check {
        transform: rotate(0deg);
        display: block;
 
    }
}
.check {
    display: block;
    float: right;
    position: absolute;
    right: 7%;
    top: 35%;
    transform: rotate(-360deg);
    transition: transform 500ms ease-in-out;
}

[psychadelic]

normal, elle est vide -> <div class="box">&nbsp;</div>

[arwin]

Merci psychadelic
J'ai fais quelques modifications en tenant compte de ta remarque. J'ai donc mis une image (une icône) dedans histoire d'avoir l'icône qui tourne alors que le box qui la contient se déploie. Mais c'est toujours exactement le même problème.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="restaurants menus">
                    <div class="box"><img class="check" src="img/check24.png" alt="#"></div>
 
                    <h3>Citrus Squid Carpaccio</h3>
                    <p>with orange zest</p>
                    <img class="heart " src="img/heart-30.png" alt="#">
                </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.menus {
    cursor: pointer;
    &:hover +.box {
        transform: scale(0) translateX(300px);
        .check {
            transform: rotate(0deg);
        }
    }
}
.box {
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background-color: yellow;
    border-radius: 4px;
    color: $btn_new2;
    transform: scale(1) translateX(0);
    transition: transform 330ms ease-in-out;
    .check {
        display: block;
        float: right;
        position: absolute;
        right: 30%;
        top: 35%;
        transform: rotate(-360deg);
        transition: transform 500ms ease-in-out;
    }
}

[arwin]

En fait c'était lié à &:hover + .box où il fallait utiliser &:hover .box ou &:hover > .box à sa place.
Merci en tout cas.