Wordpress多个特色图像悬停帮助需要（php / jquery） - 认为我80％那里

Question

I wanted to have the featured header images in my blog posts change to alternative images on hover - all of my header images are black and white so the idea is to have them change to high contrast monotone versions when hovering...

I followed the guidance of this tutorial, and after a few bumps in the road I'm now at the final hurdle where I add some javascript within the head tag of a primary php file in order to generate the hovering image transition.

Unfortunately it does absolutely nothing - I've tried placing the code in various other places (including other primary php files), with no success. Since my coding knowledge is quite basic and only within the realms of html/css, I'm really not sure what else I can try to get this working...

Unfortunately the demo link within the original tutorial I followed is dead so I can't pull apart any working code either!

this is my blog - I've temporarily removed display:none on the alternative image, just to give you a better idea of what I'm trying to do. The following is the javascript code in question:

<script type="text/javascript">
jQuery(document).ready(function() {

//Get the total number of elements having the class "galery"
var getTotalElements = jQuery(".gallery").length;

//Running Loop
for(var i = 1; i <= getTotalElements; i++) {
jQuery('.post'+i).on('hover', createCallback(i) );
jQuery('.post'+i).on('mouseleave', createCallback1(i) );
}

//This method is for hover function
function createCallback( i ){
return function(){
jQuery('.post'+i+' .entry-header .FirstImage'+i).hide();
jQuery('.post'+i+' .entry-header .SecondImage'+i).show();
}
}

//This method is for mouseleave function.
function createCallback1( i ){
return function(){
jQuery('.post'+i+' .entry-header .FirstImage'+i).show();
jQuery('.post'+i+' .entry-header .SecondImage'+i).hide();
}
}

});
</script>

The following is the code I've included in my content php file, which calls on both featured images:

<a href="<?php the_permalink(); ?>">
<div  class="first_image FirstImage"><?php the_post_thumbnail(); ?></div>
<div class="second_image SecondImage"><?php echo MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'colored-image', get_the_ID()); ?></div>
</a>

Answer 1

First modify the script to something like this instead.

jQuery(function($) {

    $('[class^="post"]').on('mouseenter mouseleave', function(e) {
        var flag = e.type === 'mouseenter';
        $('.entry-header .FirstImage', this).toggle(!flag);
        $('.entry-header .SecondImage', this).toggle(flag);
    });

});

Then you have to actually include the script after jQuery.
Right now you have the script in the header, and jQuery is loaded in the footer, so jQuery isn't available when the script is loaded.

In Wordpress, you should generally put the script in a seperate file, and enqueue it with wp_enqueue_script

It should be noted that just a straight swap like this could probably be done with just CSS as well

.post:hover .entry-header .FirstImage {
    display: none;
}

.post:hover .entry-header .SecondImage {
    display: inline;
}