Discussion :

[labarre2002]

Bonsoir


je réalise une apparition d' images au hover sur les listes .
Le soucis est que si je passe le curseur en dehors de l '
élément l ' image apparait precisément sur la zone jaune



code html:

Code html :

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

1
2
3
4
5
6
7
8
 <div class="service">
                                            <ul>
                                                <li>services</li>
                                                <li>strategig narrative <div class="boule"></div> </li>
                                                  <li>core messaging <div class="boule"></div> </li>
                                                   <li>thought leadership<div class="boule"></div></li>
                                                </ul>
                                          </div>

code CSS:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
ul{
    height: 100%;
    position: relative;
   }
 
ul li{
    display: block;
    position: relative;
    height: calc(100% / 4);
    font-size:calc(600vw / 775) ;
    text-transform: uppercase;
    font-weight: bold;
    color:black;
    border-bottom: 2px solid rgb(104, 103, 103);
    line-height: 3;
    cursor: pointer;
   }
 
ul li:nth-child(1){
    color: gray;
   }
 
 
ul li::before{
    content: "";
    position: absolute;
    inset: 0;
    width:150px;
    height:150px;
    opacity: 0;
    margin: auto;
    transform: translateY(100%);
    transition: .5s;
 
}
 
ul li:hover::before{
    opacity: 1;
    transform: translateY(0);
   }
 
ul li:nth-child(2)::before{
background: url('img/idea.jpg');
background-size:cover;
}
 
ul li:nth-child(3)::before{
   background: url('img/internet.jpg');
    background-size:cover;
}
 
ul li:nth-child(4)::before{
    background: url('img/leader.jpg');
    background-size:cover;
}

Que faire pour que les images n'apparaissent qu ' au hover sur les listes.

Merci.

[Doksuri]

ca fonctionne chez moi : https://jsfiddle.net/g2jk65ua/ <= les images n'apparaissent qu'au survol des elements de la liste

ou alors, je n'ai pas compris ton probleme

[labarre2002]

Merci pour ton message positionne le curseur a l'endroit coloré en
jaune sur ma capture d ' écran

[labarre2002]

positionne ton curseur sur la zone en bleu

[NoSmoking]

Bonjour,
les éléments en opacity:0, qu'ils soient dans des pseudo-element ou non reçoivent les événements pointer.

Donc si tu ne veux pas mettre que cela soit le cas il te suffit d'ajouter une déclaration pointer-events: none au CSS de ces éléments.

Question quand même, pourquoi mettre ces images dans des pseudo-element !!!

[labarre2002]

@NoSmoking


merci pour ton méssage

" pourquoi mettre ces images dans des pseudo-element !!!" c' est la méthode que je connais