Как сделать что бы :hover снимался с ссылки при клике на другую область в iphone 6, без JS?

Question

[Vladimir L]

Делаю сайт для мобильных устройств, мне нужно по нажатию на корзину что бы появлялся попап, а потом по нажатию на другую область пропадал, я это сделал с помощью :hover, только проблема в том , что попап пропадает если нажать на другие ссылки , а не просто на другую область

<div class="wrapper">
                    <h1 class="header__title">Инструмент </h1>                    
                    <div class="basket basket__svg--active" id="basket">
                        <a class="basket__link" href="#" aria-haspopup="true">
                            <svg class="empty-basket" width="25" height="25"><use xlink:href="sprite.svg#empty-basket"></use></svg>
                            <svg class="full-basket" width="25" height="25"><use xlink:href="sprite.svg#full-basket"></use></svg>
                            <div class="popup-basket" id="popup-basket">
                                <div class="inner">
                                    <table class="table" border="1">
                                        <tr><th>Товар</th><th>Количество</th><th>Сумма</th></tr>
                                        <tr><td>Болгарка</td><td>1 шт.</td><td>5852 р.</td></tr>
                                        <tr><td>Сверло</td><td>5 шт.</td><td>250 р.</td></tr>
                                    </table>
                                    <form action="#" method="post" class="form__button">
                                        <button name="Купить" class="butt butt__pay">Купить</button>
                                        <button name="Отмена" class="butt butt__cancel">Очистить</button>
                                    </form>
                                </div>
                            </div>  
                        </a>
                    </div>                
                </div>

.popup-basket {
    position: absolute;
    outline: none;
    display: none;
    right: 7px;
    border: 1px solid;
    border-radius: 10px;
    z-index: 1;
    background-color: var(--background-color-popup);
}

.basket__link:hover .popup-basket {
    display: inline-block;
}

Comments

[Rustam Bainazarov]

Есть один способ-костыль с pointer-events: none; на ссылке.

[Vladimir L]

Рустам Байназаров, Если так сделать

.basket__link {
    pointer-events: none; 
}

то перестает появляться попап

[Rustam Bainazarov]

Vladimir L, стили hover вешайте на обёртку, внутри обёртки ссылка и что вам там надо.

У ссылки изначально pointer-events: none. При ховере на обёртку убираете у ссылок это свойство.

Не смотрел вашу структуру, но если у вас всё внутри ссылки, то нужно будет переделать.

[Vladimir L]

Рустам Байназаров, Переделал стили, посмотрите, пожалуйста, что ещё нужно переделать пока не работает

.basket__link {
    pointer-events: none;
}

.basket:hover .basket__link {
    pointer-events: auto; 
}
.basket:hover .popup-basket {
    display: inline-block;
}

Вид такой

[Rustam Bainazarov]

Можно улучшить вот так:

[Rustam Bainazarov]

В целом, это костыль, хоть и достаточно рабочий.

[Rustam Bainazarov]

Vladimir L, посмотри песочницу, что я прислал, я не вспомнил, как правильно сделать хак с pointer-events: none, поэтому прислал старый свой хак, который пару использовал. Хотя лучше, конечно, такие штуки делать на JS.

На сенсорных по нажатию сначала появится всплывающее окно, а затем, если нажать ещё раз, то сработает ссылка.

[Vladimir L]

Рустам Байназаров, Всё равно не получается , вы тестировали этот подход на iphone ?

[Rustam Bainazarov]

Vladimir L, прямо сейчас с него сижу и у меня работает.

[Vladimir L]

Рустам Байназаров, Можете ещё раз глянуть мой код ?

<div class="basket basket__svg--active" id="basket" tabindex="1">
                        <div class="wrapper-blocker">
                            <div class="item__link-blocker"></div>
                            <a class="basket__link" href="#">
                                <svg class="empty-basket" width="25" height="25"><use xlink:href="sprite.svg#empty-basket"></use></svg>
                                
                            </a>
                            <div class="popup-basket" id="popup-basket">
                                <div class="inner">
                                    <table class="table" border="1">
                                        <tr><th>Товар</th><th>Количество</th><th>Сумма</th></tr>
                                        <tr><td>Болгарка</td><td>1 шт.</td><td>5852 р.</td></tr>
                                        <tr><td>Сверло</td><td>5 шт.</td><td>250 р.</td></tr>
                                    </table>
                                    <form action="#" method="post" class="form__button">
                                        <button name="Купить" class="butt butt__pay">Купить</button>
                                        <button name="Отмена" class="butt butt__cancel">Очистить</button>
                                    </form>
                                </div>
                            </div> 
                        </div>                        
                    </div>

.popup-basket {
    position: absolute;
    outline: none;
    display: none;
    right: 7px;
    border: 1px solid;
    border-radius: 10px;
    z-index: 1;
    background-color: var(--background-color-popup);
}
.basket__link {
    display: block;
}
.wrapper-blocker {
    position: relative;;
}
.basket:hover .item__link-blocker {
  visibility: hidden;
}
.basket:hover .popup-basket {
  display: inline-block;
}
.item__link-blocker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
}

[Rustam Bainazarov]

Vladimir L, залейте это счастье в песочницу.

[Vladimir L]

Рустам Байназаров, вот ссылка lobochkin.ru/site/sitefull

[Rustam Bainazarov]

Vladimir L, ай, погодите, вы хотите, чтобы по нажатию на кнопки «Купить» и «Очистить» у вас не пропадал этот «поп-ап»?

[Vladimir L]

Рустам Байназаров,

[Vladimir L]

Рустам Байназаров, нет, я хочу что бы он пропадал если щелкнуть на любое другое место кроме попапа

[Rustam Bainazarov]

Vladimir L, памяти на iPhone нет, запишу на Android, один хрен:

https://streamable.com/c69dh

Или я чего-то не понимаю?

[Vladimir L]

Рустам Байназаров, Так я и хочу, что бы работало, на эмуляторе у меня тоже работает, а на самом телефоне нет

[Rustam Bainazarov]

Vladimir L, у меня работает на iPhone X iOS 12.

Зайдите в режиме инкогнито.

[Vladimir L]

Попап убирается только если нажать на одну из ссылок, или кнопки купить-очистить

[Vladimir L]

Рустам Байназаров, Ничего не меняется, пробовал и на яндекс браузере и на safary на устройстве ipone 6

[Александр]

Взяли за правило не прописывать :hover, :active при разрешении менее 860pt (планшеты и мобильники)

[Vladimir L]

Александр, не понял, извините, кто взял за правило ?

[Александр]

Vladimir L, в своей команде разработки

[Vladimir L]

Александр, Почему пришли к такому решению ?

[Александр]

Vladimir L, потому что нет смысла