Internet Explorer 11: Mouseenter Mouseleave issue

Question

Я действительно работаю над этим website, и у меня есть проблема в Internet Explorer.

На правой стороне страницы (серый) есть кнопка с иконкой «i». Эта кнопка является модальной и внутри модального окна есть таблица с «mouseewouseleave» мыши над строками таблицы.

Анимация прекрасно работает на Chrome, Firefox и т. Д., Но не на старых версиях Internet Explorer.

Функция переключения в последних 5 строках не работает.

Любые идеи о том, как я могу его решить?

PS: Я использую Wordpress

Код:

<script> 

jQuery(document).ready(function($){ 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-2.even", function() { 
$('.buro_1').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-3.odd", function() { 
$('.buro_2').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-4.even", function() { 
$('.buro_3').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-5.odd", function() { 
$('.buro_4').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-6.even", function() { 
$('.buro_5').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-7.odd", function() { 
$('.buro_6').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-8.even", function() { 
$('.buro_7').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-9.odd", function() { 
$('.buro_8').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-10.even", function() { 
$('.buro_9').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-11.odd", function() { 
$('.buro_10').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-12.even", function() { 
$('.buro_11').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-13.odd", function() { 
$('.buro_12').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-14.even", function() { 
$('.buro_13').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-15.odd", function() { 
$('.buro_14').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-16.even", function() { 
$('.buro_15').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-17.odd", function() { 
$('.buro_16').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-18.even", function() { 
$('.buro_17').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-2 .row-19.odd", function() { 
$('.buro_18').toggle(); 
}); 

}); 
</script> 

Answer 1

Проблема в том, что у вас есть CSS, которые скрывают свой элемент. Попробуйте удалить все: (на http://www.aquila-pratteln.ch/wp-content/uploads/js_composer/custom.css?ver=4.12)

@media all and (-ms-high-contrast:none), all and (-ms-high-contrast:active) 
.buro_14 { 
    display: none !important; 
} 

@media all and (-ms-high-contrast:none), all and (-ms-high-contrast:active) 
.buro_15 { 
    display: none !important; 
} 

@media all and (-ms-high-contrast:none), all and (-ms-high-contrast:active) 
.buro_16 { 
    display: none !important; 
} 

@media all and (-ms-high-contrast:none), all and (-ms-high-contrast:active) 
.buro_17 { 
    display: none !important; 
} 

@media all and (-ms-high-contrast:none), all and (-ms-high-contrast:active) 
.buro_18 { 
    display: none !important; 
} 

Строки 14, 15, 16, 17, 18 уже display:block попробовать сделать это display:none тоже

прекрасно работают с IE9 и более