Это продолжение предыдущего вопроса, который, я думал, был решен. Технически это решено для других браузеров, поэтому я решил, что может быть лучше, как новый вопрос со ссылкой на другой выпуск .
Ссылку на веб-страницу можно посмотреть здесь
Вот код моей карты изображений:
">
Вот код Javascript. Я включил комментарии в коде:
function openAutomation(){
console.log("openAutomation");
$('#image-map').attr('src', automation);
$('#automationModal').modal('show');
};
function openIntegration() {
console.log("openIntegration");
$('#image-map').attr('src', integration);
$('#integrationModal').modal('show');
};
function closeAutomation(){
console.log("closeAutomation");
$('#image-map').attr('src', original);
$('#automationModal').modal('hide');
};
function closeIntegration() {
console.log("closeIntegration");
$('#image-map').attr('src', original);
$('#integrationModal').modal('hide');
};
И снова, как вы можете видеть в предыдущем выпуске, вещь, которая, казалось, разрешала запуск onmouseover - onmouseleave - onmouseover, добавляла pointer-events: none !important к .modal-background, .modal, .modal-content классы
Если вы используете, скажем, firefox или chrome, вы можете видеть, что он работает правильно. В основном, если вы наведите курсор мыши на одну часть изображения, появится модальное bootstrap и если вы оставите мышкой ту же часть изображения, модальное bootstrap должно скрыться. В IE / EDGE это всегда вызывает наведение мыши, но когда вы пытаетесь и отпускание мыши, оно не срабатывает в 99% случаев