<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="bloc1">voir le bloc numéro 2</div>
<div id="bloc2">voir le bloc numéro 3</div>
<div id="bloc3">ceci est le bloc numéro 3</div>
<script src="script.js"></script>
</body>
</html>div{
position:absolute;
width:200px;
height:200px;
border:1px solid black;
cursor:pointer;
}
div:hover{
background:gray;
}
#bloc1{
}
#bloc2{
right:10px;
top:10px;
display:none;
}
#bloc3{
bottom:10px;
display:none;
}function montrerBloc2(){
bloc2 = document.querySelector('#bloc2');
bloc2.style.display = "block";
}
function montrerBloc3(){
bloc3 = document.querySelector('#bloc3');
bloc3.style.display = "block";
}
bloc1 = document.querySelector('#bloc1');
console.log(bloc1);
bloc1.addEventListener('click', montrerBloc2);
bloc2 = document.querySelector('#bloc2');
bloc2.addEventListener('click', montrerBloc3);
