Apparition d'image au mouseenter

**labarre2002** · 24/04/2024, 16h44

Bonsoir

Je réalise une apparition d images au survol d un élément ou plutôt un mot

Code html :

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
<body>
  <div class="main">
 
<div class="mouse"></div>
    <ul>
      <li>frame
        <img src="https://images.unsplash.com/photo-1711677371698-4496b754c4b1?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
      </li>
      <li>vertical
        <img src="https://images.unsplash.com/photo-1711098288630-30b69a86be92?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="pieds">
      </li>
      <li>board
        <img src="https://images.unsplash.com/photo-1712187466004-c64b4571828b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="femme">
      </li>
      <li>popular
        <img src="https://images.unsplash.com/photo-1711109631427-f90f9d83364b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="couple">
      </li>
      <li>trends
        <img src="https://images.unsplash.com/photo-1711861399198-649bc0ddc33f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
      </li>
      <li>brand
        <img src="https://images.unsplash.com/photo-1713623633904-a0a8dca6fafc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="paysage">
      </li>
      <li>almost
        <img src="https://images.unsplash.com/photo-1712181938400-a76d207d4fcb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU2NzF8&ixlib=rb-4.0.3&q=85"  class="pic"  alt="femme africaine">
      </li>
    </ul>
 
  </div>
 
 
 
</body>

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
*{
    font-size: 16px;
    font-family: verdana;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: #151316;
    display: grid;
    place-items: center;
}
 
::-webkit-scrollbar{
    display: none;
}
 
 
.main{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
   overflow: hidden;
}
 
ul{
    height: 60vmin;
}
 
 
ul li{
    color: #3a3a3a;
    text-transform: capitalize;
    font-size: 6vw;
   font-weight: 600;
    list-style: none;
    text-align: center;
    letter-spacing: 3px;
 }
 
img{
    display: block;
    width: 350px;
    height: 400px;
    object-fit: cover;
 
}
 
.pic{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity:0;
    pointer-events: none;
}
 
.mouse{
    width: 60px;
    height: 60px;
    background-color: #d7d98d;
    border-radius: 100px;
    position: absolute;
    transition: transform  .3s;
}
 
 
.appear{
    opacity: 1;
}

et enfin

Code javascript :

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
 const souris=document.querySelector('.mouse');
    const mots=document.querySelectorAll('li');
    const pic=document.querySelector('.pic');
    console.log(pic);
 
    window.addEventListener("mousemove",(e)=>{
     console.log(e);
     souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
     souris.style.top=e.pageY - souris.offsetHeight/2 + "px";
    })
 
    mots.forEach(element => {
       element.addEventListener("mouseenter",()=>{
        pic.classList.toggle('appear')
       })
 
       element.addEventListener("mouseout",()=>{
       pic.classList.toggle('appear')
      })
});

je n'obtiens rien puis je avoir des pistes pour transcender cet aspect de problème ?

Merci

**Toufik83** · 24/04/2024, 23h54

Bonjour,

Rajoutes position: relative; aux <li> dans le code CSS ligne 37 ul li{ .....;position: relative;} puis remplaces pic par element.querySelector('.pic') dans le code JS lignes 14 et 18

**labarre2002** · 26/04/2024, 22h33

Bonsoir

je viens de modifier mon code:

Code javascript :

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
 const souris=document.querySelector('.mouse');
    console.log(souris);
 
    window.addEventListener("mousemove",(e)=>{
     console.log(e);
     souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
     souris.style.top=e.pageY - souris.offsetHeight/2 + "px";
    })
 
    mots.forEach(element => {
       element.addEventListener("mouseenter",()=>{
        element.querySelector('.pic').classList.toggle('appear')
       })
 
       element.addEventListener("mouseout",()=>{
        element.querySelector('.pic').classList.toggle('appear')
      })
});

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
ul li{
    position: relative;
    color: #3a3a3a;
    text-transform: capitalize;
    font-size: clamp(7.2rem, -13.2vw + 10.5rem, 2.25rem);
   font-weight: 600;
    list-style: none;
    text-align: center;
    letter-spacing: 3px;
 }
 
img{
    display: block;
    width: 350px;
    height: 400px;
    object-fit: cover;
 
}
 
.pic{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    pointer-events: none;
}

mais rien ne se passe

**Toufik83** · 26/04/2024, 23h06

Dans le dernier code JS tu n'as pas déclaré la variable mots, tu aurais dû voir l'erreur dans la console du navigateur...

**labarre2002** · 26/04/2024, 23h28

j' ai pas remarqué mais meme a présent il se passe toujours rien

**Toufik83** · 26/04/2024, 23h41

Bonsoir,

Voir le lien en ligne.

Les codes JS et CSS doivent être comme ça :

Code js :

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
const souris = document.querySelector('.mouse');
const mots = document.querySelectorAll('li');
// console.log(souris);
 
window.addEventListener("mousemove", (e) => {
  // console.log(e);
  souris.style.left = e.pageX - souris.offsetWidth / 2 + "px";
  souris.style.top = e.pageY - souris.offsetHeight / 2 + "px";
})
 
mots.forEach(element => {
  element.addEventListener("mouseenter", () => {
    element.querySelector('.pic').classList.toggle('appear')
  })
 
  element.addEventListener("mouseout", () => {
    element.querySelector('.pic').classList.toggle('appear')
  })
});

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
* {
  font-size: 16px;
  font-family: verdana;
}
 
body {
  width: 100vw;
  height: 100vh;
  background-color: #151316;
  display: grid;
  place-items: center;
}
 
::-webkit-scrollbar {
  display: none;
}
 
 
.main {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
 
ul {
  height: 60vmin;
}
 
 
ul li {
  color: #3a3a3a;
  text-transform: capitalize;
  font-size: 6vw;
  font-weight: 600;
  list-style: none;
  text-align: center;
  letter-spacing: 3px;
  position: relative;
}
 
img {
  display: block;
  width: 350px;
  height: 400px;
  object-fit: cover;
 
}
 
.pic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
 
.mouse {
  width: 60px;
  height: 60px;
  background-color: #d7d98d;
  border-radius: 100px;
  position: absolute;
  transition: transform .3s;
}
 
 
.appear {
  opacity: 1;
}