Currently, my website utilizes jQuery, Bootstrap, Font Awesome, Normalize, and jquery.multilevelpushmenu.js v2.1.4 to create a side-menu with multiple levels. I am attempting to implement a hover operation in conjunction with this menu, but encountering an issue where the hover function is only triggered after the first toggle of the menu, which is behavior I have not encountered before.
<script>
$(document).ready(function () {
$('.content gallery-item').hover(function () {
$(this).find('.content img-title').fadeIn(300);
}, function () {
$(this).find('.content .img-title').fadeOut(0);
});
});
</script>
So far, I have attempted the following:
- Reducing the script and JS libraries to a minimal setup
- Targeting the desired hover tag with a more specific CSS selector
You can view the complete scenario on this JSFiddle link.
I am seeking advice on how to ensure that the hover function works onload without any issues. How can I achieve this?