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
   });
});

Wordpress不接受.hover（jquery）

1 个答案: