javascript only works after page refresh

[soheila]

Hi.I have some code and I think are correct. However, code only works after the page is refreshed and I have no idea what would cause this.
These codes are about sliding products anywhere on the my website.

my file path is: public_html/themes/panda/assets/js/theme.js and for example my code is:

$(document).ready(function(){ 
$(".hover_fly .hover_fly_btn:first-child").mouseover(function(){

    $(this).parents('.pro_outer_box').find('.overlay-desc').css({ opacity: 0.1})
});  

$(".hover_fly .hover_fly_btn:first-child").mouseout(function(){
  $(this).parents('.pro_outer_box').find('.overlay-desc').css({ opacity: 0});
});
  
});