Есть вот такое модальное окно на css. Как его переделать, что бы работало при наведении
.popup {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
overflow-y: auto;
overflow-x: hidden;
}
.popup:target {
opacity: 1;
visibility: visible;
}
.popup-area {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.popup-body {
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 30px 10px;
position: relative;
z-index: 9999;
}
.popup-content {
background-color: #fff;
color: #000;
padding: 30px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 400px;
height: 300px;
}
.popup-title {
font-size: 22px;
text-align: center;
font-weight: 600;
margin-top: 15px;
}
.popup-text {
font-size: 22px;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 35px;
}
.popup-close {
position: absolute;
right: -50px;
top: 0;
font-size: 40px;
color: #fff;
text-decoration: none;
}
<a href="#popup" class="popup-link">ffffff
<circle cx="581" cy="169" r="3" fill="#F3C644" /></a>
<div id="popup" class="popup">
<a href="#" class="popup-area"></a>
<div class="popup-body">
<div class="popup-content">
<a href="#map__kz" class="popup-close">x</a>
<div class="popup-title">
г.Нур-Султан
</div>
<ul class="popup-ul">
<div class="popup-text">
<p>Есильский р-н, пр. Кабанбай </p>
</div>
<div class="popup-text">
<p> Батыра, д.2/6, офис 35</p>
</div>
</ul>
</div>
</div>
</div>