1

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

2
  • <a href="#popup11" class="popup-link" target=_blank style="font-size: 20px; color: #FF0000;" onmouseover='window.open("#popup11");'> <circle cx="132" cy="117" r="4" fill="#FF4545" /> </a> 3 мар 2021 в 5:04
  • модальное окно использует ссылку, я сделал так что бы при наведении выполнялась ссылка. В приницпе работает, но переходит на другую страницу. Как сделать что бы на этой же странице отрабатывалась? 3 мар 2021 в 5:06

1 ответ 1

1

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

.popup-link:hover ~ .popup,
.popup:hover {
    opacity: 1;
    visibility: visible;
}
7
  • Работает, но на сайте у меня hover должен отработать на svg. Вот на svg не хочет 4 мар 2021 в 4:36
  • хотя circle лежит внутри ссылки 4 мар 2021 в 4:50
  • twsc.kz/index.php/geography 4 мар 2021 в 5:30
  • Положите SVG и контейтер попапа на один уровень 4 мар 2021 в 6:00
  • контейнер попапа под ссылку?@RuslanMart 4 мар 2021 в 6:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.