无法获得简单的jquery脚本在WordPress页面上工作

我正尝试在我正在开发的WordPress网站上使用jQuery插件HCaptions，这样当鼠标悬停在图像上时，图像上会出现一些信息。我已经能够在主题的function-extras.php文件中排队脚本，并且我可以看到脚本已经与所有其他脚本一起加载，但是脚本没有按照需要处理悬停事件。在这个阶段，我只是复制和粘贴从HCaptions库建议的默认代码，但有参考我自己的相关图片如下：无法获得简单的jquery脚本在WordPress页面上工作

<a href="#myToggle" class="panel"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/test-feature-image.jpg" /> 
</a> 
<div id="myToggle" class="cap-overlay hide"> 
    <h5>Cupcakes</h5> 
    <div class="content"> 
     Name: cupcakes.png<br /> 
     Photography: Ryun Shofner<br /> 
     <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
     <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a> 
    </div> 
</div>

我工作的网站可以在www.heartinhand.com.au访问。任何建议不胜感激。

来源

2015-04-23 oldo.nicho

你有一个脚本错误的位置：

$(window).load(function(){ 
    $('.hcaption').hcaptions(); 
});

尝试将其更改为这样：

jQuery(document).ready(function($){ 
    $('.hcaption').hcaptions(); 
});

这是因为包含在WordPress的jQuery库设置为 “noconflict” 模式compatibility reasons。

你的形象也需要hcaption类和数据属性，像这样：

<a href="#" data-attribute="#myToggle" class="hcaption panel">

来源

2015-04-23 04:05:49 Mike

干杯@Mike，我现在可以看到的是，当我将鼠标悬停在图像，一些不同造型的参数正在改变' ＃myToggle'，这太好了。然而，隐藏的'div'还没有被揭示。还有什么建议？谢谢！ –

在你的bootstrap.min.css中，从.hide类中移除！important标记（display：none而不是display：none！important） – Mike

你是一个向导！ –

无法获得简单的jquery脚本在WordPress页面上工作

回答

相关问题