tudo bom? estou com o seguinte problema com mouse hover, comecei a ver algumas aulas de html e css e estou com um projeto pessoal, eu fiz um código simples apenas para estudar mouse hover porém ele não funciona corretamente, já tentei display: none/block, visibility: hidden, filter: opacity e nada o mouse hover não funciona, sendo que é de uma classe para outra.
Este é o código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<div class="mapa"><a class="loja"></a></div>
<div class="descri">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM
IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM
IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM
IPSUM LOREM IPSUM </div>
</body>
</html>
<style type="text/css">
.mapa {
width: 500px;
height: 500px;
background: green;
float: left;
}
a.loja {
width: 20px;
height: 20px;
background: black;
position: absolute;
border-radius: 100px;
margin-top: 29px;
margin-left: 53px;
transition: 1s;
}
a.loja:hover {
cursor: pointer;
background: red;
}
a.loja:mouseover .descri{
display: block;
}
.descri {
width: 300px;
height: 300px;
float: left;
background: black;
color: white;
text-align: justify;
padding: 21px;
font-size: 10px;
display: none;
}
Alguém por gentileza, pode me dizer onde estou errando?
Grato.