Wordpress 不接受 .hover (jquery)

Question

我編寫了一些代碼來使 div 變暗並在鼠標移到它們上方時顯示文本，並且在我的計算機上運行良好。 但是由於某種原因，當我將它上傳到 Wordpress 時它不起作用。 我知道它正在處理我的 Jquery，因為 div 高度是在腳本中計算的，.hover 是唯一不起作用的東西。 我正在使用 Divina 主題，如果這有任何區別，並且如果我刪除指向 jquery 文件的鏈接，它會完全停止計算高度。

這是我的代碼（ 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

嘗試使用鼠標懸停功能而不是 .hover

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