jQuery Hover not working on Wordpress site

Question

I posted this question about toggling DIV visibility earlier today and received the correct answer which works perfectly as you can see in this Fiddle .

I'm basically trying to toggle div visibility on repeating classes with jQuery hover.

The problem is, I can't get it working on my Wordpress site.

The jQuery just isn't firing at all even though all of the div's and CSS is present and correct. There are no error's being reported in the console at all. It's just not loading this function.

I must be calling it incorrectly!

FYI - WP site is loading jQuery 1.11.0 and jQuery.migrate 1.2.1.

The jQuery exactly how it is located in the footer of the site (wrapped due to compatibility mode) :

 <script type="text/javascript">

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

 </script>

The CSS looks like this :

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

The HTML fires like this :

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

Like I mentioned above, the actual CSS is displaying perfectly on the page and everything HTML wise is where it should be. It's just the jQuery not working so the code must be incorrect.

Could somebody show me where I'm going wrong please?

Answer 1

The wordpress autoloads the jquery, so if you included the jquery manually in your theme the jquery is loaded twice and this could create a conflict.

Please read this article about including js and css properly

Answer 2

Probably it is because you're not waiting for DOM ready before binding the event, and you cannot use .off() if you did not use .on() to bind the event:

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

Or the content you're binding this event handler to may not be available at DOM ready :

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