Javascript jQuery悬停在Wordpress站点上不起作用

今天早些时候，我发布了关于切换DIV可见性的帖子，并收到了正确的答案，正如您在本文中看到的那样，该答案非常有效

我基本上是尝试使用jQuery hover在重复类上切换div可见性

问题是，我无法让它在我的Wordpress网站上运行

jQuery根本没有启动，即使所有的div和CSS都存在并且正确。控制台中根本没有报告任何错误。它只是没有加载这个函数

我一定是打错电话了

仅供参考-WP站点正在加载jQuery 1.11.0和jQuery.1.2.1

jQuery在站点页脚中的确切位置（由于兼容模式而包装）：

HTML如下所示：

 .showlist-wrap {
   position:relative;
   width:293px;
   height:195px;
   background:black;
   margin-right:13px;
   margin-bottom:13px;
   float:left;
   border-radius:10px;
   overflow:hidden;
 }

 .showlist-artwork {
   position:absolute;
   top:0;
   width:293px;
   height:195px;
   display:block;
 }

 .showlist-info {
   position:absolute;
   top:0;
   width:293px;
   height:195px;
   display:none;
 }

 <div class="showlist-wrap">
 <div class="showlist-artwork"><img src="/image.jpg" /></div>
 <div class="showlist-info">Some Text Goes Here</div>
 </div>

这里有一些文字

正如我上面提到的，实际的CSS在页面上显示得非常完美，HTML方面的所有内容都应该显示出来。只是jQuery不起作用，所以代码一定不正确

---

有人能告诉我哪里出错了吗？

wordpress自动加载jquery，因此如果您在主题中手动包含jquery，jquery将加载两次，这可能会产生冲突

---

请阅读有关正确包含js和css的文章

可能是因为您在绑定事件之前没有等待

DOM就绪

，如果您没有使用

.on（）

绑定事件，则无法使用

.off（）

：

$(function(jQuery) {
    (function($) {
        $(".showlist-wrap").on('hover', function() {
            $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
        });
    })( jQuery );
});

或者，您要将此事件处理程序绑定到的内容在

DOM ready

上可能不可用：

(function($) {
    $(document).on('hover', ".showlist-wrap", function() {
        $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
    });
})( jQuery );

---

你在用什么浏览器？如果您使用IE，请确保模式大于IE8No IE here，all Mac。Chrome、Firefox和Safari。不，我不会两次加载jQuery。我正在使用jQuery和migrate的捆绑排队版本。每个实例只有一个，正确排队。非常感谢，第二个成功了。我需要好好读一读DOM，太好了！很高兴我能帮忙。

(function($) {
    $(document).on('hover', ".showlist-wrap", function() {
        $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
    });
})( jQuery );