На сайте https://neu.seidelpartner.ch/ есть десять кнопок в разделе «Kunden». Они функционируют следующим образом (я покажу это в случае кнопки 1 в левом верхнем углу, поскольку остальные работают точно так же):
Каждая кнопка представляет собой HTML элемент кнопки.
<button id="kunden_button1" class="kunden_button">KMU</button>
Каждой кнопке принадлежит элемент HTML div, который будет всплывающим.
<div id="kunden_popup1" class="kunden_popup">A few sentences.</div>
Соответствующий CSS не очень важен, так как он только для позиции и внешнего вида. элементов и будет излишне загромождать этот пост. Однако, если запрашивается CSS, я, конечно, предоставлю его.
По умолчанию всплывающие окна скрыты.
jQuery("#kunden_popup1").hide();
При наведении на кнопку всплывающее окно up будет отображаться и скрываться снова, когда человек больше не будет наводить курсор на кнопку.
jQuery("#kunden_button1").hover(
function() {
jQuery("#kunden_popup1").show();
}, function() {
jQuery("#kunden_popup1").hide();
}
);
На настольных ПК ноутбуки при использовании мыши для навигации по вышеуказанным настройкам работают по желанию. Ограничение возникает на сенсорных устройствах, особенно на смартфонах, поскольку все кнопки расположены очень близко друг к другу, и всплывающее окно перекрывает их все.
Когда открывается всплывающее окно с прикосновением к кнопке, оно открывается немедленно. Вторым касанием где-то за пределами области всплывающих окон оно снова закрывается, и снова видны кнопки. Но если нажать, когда всплывающее окно открыто, внутри этой области всплывающего окна активируется кнопка под ним, и всплывающее окно переключается на нее.
В идеале, когда всплывающее окно открыто, оно должно закрываться там, где я касаюсь, без непосредственной активации другого.
Я не знал об этом поведении при реализации функции и ищу простой способ изменить нежелательное поведение выше желаемого. Желательно без изменения всего механизма jQuery при наведении / скрытии.
Спасибо за любые ответы.