Wordpress not accepting .hover (jquery)

Question

I built some code to make divs darken and display text when the mouse is moved over them, and it was working fine on my computer. But for some reason when I upload it into Wordpress it doesn't work. I know it's processing my Jquery because the div height is calculated in script, the .hover is the only thing that does not work. I'm using the Divina theme, if that makes any difference, and it stops calculating height altogether if I remove the link to the jquery file.

This is my code ( http://vifer.pt/teste/561-2/ )

<style type="text/css">
.outside div{background:rgba(0,0,0,.5);
    width:100%;
    height:100%;
    color:white;
    visibility:hidden;}
#pin div{background:rgba(0,0,0,.5);
    width:100%;
    height:100%;
    color:white;
    visibility:hidden;}
#pre{width:50%;
    float:left;
    background:url("http://www.vifer.pt/teste/wp-content/images/pre1.jpg");
    background-size:100%;
    background-repeat:no-repeat;}
#liv{width:50%;
    float:left;
    background:url("http://www.vifer.pt/teste/wp-content/images/liv1.jpg");
    background-size:100%;
    background-repeat:no-repeat;}
#esc{width:50%;
    float:left;
    background:url("http://www.vifer.pt/teste/wp-content/images/esc1.jpg");
    background-size:100%;
    background-repeat:no-repeat;}
#des{width:50%;
    float:left;
    background:url("http://www.vifer.pt/teste/wp-content/images/des1.jpg");
    background-size:100%;
    background-repeat:no-repeat;}
#pin{width:100%;
    float:left;
    background:url("http://www.vifer.pt/teste/wp-content/images/pin1.jpg");
    background-size:100%;
    background-repeat:no-repeat;}
</style>
<div class="outside" id="esc"><div class="hide">Ver mais</div></div>
<div class="outside" id="des"><div class="hide">Ver mais</div></div>
<div class="outside" id="pre"><div class="hide">Ver mais</div></div>
<div class="outside" id="liv"><div class="hide">Ver mais</div></div>
<div id="pin"><div class="hide">Ver mais</div></div>
<script type="text/javascript" src="http://www.vifer.pt/teste/wp-content/themes/vifer_theme/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
                var wide = $('.outside').css('width');
                var wide_pin = $('#pin').css('width');
                var calculate = parseInt(wide, 10)* 1.29;
        var calc_pin = parseInt(wide_pin, 10)* 0.39;
                $('.outside').css('height', calculate);
        $('#pin').css('height', calc_pin);
        $("#esc").hover(function(){$('#esc div').css('visibility','visible')}, function(){$('#esc div').css('visibility','hidden')});
        $("#liv").hover(function(){$('#liv div').css('visibility','visible')}, function(){$('#liv div').css('visibility','hidden')});
        $("#pre").hover(function(){$('#pre div').css('visibility','visible')}, function(){$('#pre div').css('visibility','hidden')});
        $("#des").hover(function(){$('#des div').css('visibility','visible')}, function(){$('#des div').css('visibility','hidden')});           
        $("#pin").hover(function(){$('#pin div').css('visibility','visible')}, function(){$('#pin div').css('visibility','hidden')});   
});
</script>

Answer 1

Try using mouseover function instead of .hover

$( document ).ready(function() {
   $("#esc").mouseover(function() {
      //do your things
   });
});