Как при наведении выполнить target

Есть вот такое модальное окно на 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>

codepen


Ответы (1 шт):

Автор решения: Ruslan Mart

Если через CSS, то только так:

.popup-link:hover ~ .popup,
.popup:hover {
    opacity: 1;
    visibility: visible;
}
→ Ссылка