jQuery Hover在Wordpress网站上不起作用

Question

我今天早些时候发布了有关切换DIV可见性的问题 ，并且收到了正确的答案，正如您在本小提琴中所看到的那样，该答案非常有效。

我基本上是想在jQuery悬停的重复类上切换div可见性。

问题是，我无法在我的Wordpress网站上使用它。

即使所有的div和CSS都存在且正确，jQuery根本不会触发。 控制台中完全没有错误报告。 它只是不加载此功能。

我一定叫错了！

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

jQuery确切地位于网站页脚的位置（由于兼容模式而被包装）：

 <script type="text/javascript">

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

 </script>

CSS看起来像这样：

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

HTML触发如下：

 <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明智的地方都应该显示在CSS上。 只是jQuery无法正常工作，因此代码必须不正确。

有人可以告诉我我要去哪里了吗？

Answer 1

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

请阅读此文章有关，包括JS和CSS正确

Answer 2

也许这是因为你不等待DOM ready绑定事件之前，你不能使用.off()如果你没有使用.on()来绑定事件：

$(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 );