Changeling

Le fichier JavaScript ci-après permet :

  • d'afficher une bordure autour d'un div doté d'une classe main lorsque la souris passe dessus,

  • et de la supprimer lorsqu'on retire la souris.

1
let p = document.querySelector('div.main')
2
3
p.addEventListener('mouseover', addBorder)
4
p.addEventListener('mouseout', removeBorder)
5
6
function addBorder() {
7
  this.style.border = 'solid'
8
}
9
10
function removeBorder() {
11
  this.style.border = 'none'
12
}
Question
Réaliser un fichier HTML qui affiche cet extrait de la chanson The Changeling des Doors.
I'm a Changeling
See me change
I'm a Changeling
See me change
Indice


Solution
1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Exercice</title>
6
    <script src="script.js" defer></script>
7
  </head>
8
  <body>
9
    <div class="main">
10
      <p>I'm a Changeling</p>
11
      <p>See me change</p>
12
      <p>I'm a Changeling</p>
13
      <p>See me change</p>
14
    </div>
15
  </body>
16
</html>
17