Using jQuery button hover effect

jQuery is included in WordPress core, you don’t need to include it. Using javascript in WordPress can be a little tricky, because you need to include the files a specific way to avoid funky behavior. Go ahead and remove the file you uploaded to the wp-admin directory. You don’t ever want to touch wp-admin or wp-includes.

Create a separate javascript file, we’ll call it baz.js, and put it in your theme root. Here’s a fiddle with the basics for how to handle a hover/mouseout event: https://jsfiddle.net/etcth/

You want to call .css() in jQuery rather than .attr().

In addition, WordPress uses jQuery in no conflict mode, so rather than $(document).ready(function(){ at the top of your javascript file, put jQuery(document).ready(function($){ That will allow you to $ throughout your js file.

Lastly, in order to properly include your javascript file, you need to hook it to wp_enqueue_scripts. In you functions.php file, add the following:

add_action('wp_enqueue_scripts','include_my_scripts');
function include_my_scripts() {
    wp_enqueue_script('baz.js','/path/to/baz.js');
}

Make sense?

Makes sense, but it’s still not working… I have the feeling I’m doing something wrong in my baz.js file, here’s the code I’ve got:

jQuery(document).ready(function($){
	$('.modelbutton').on('mouseenter',function(e) {
		$(this).css('background-image','wp-content/uploads/2013/05/buttonA_on.png');
			});
	$('.modelbutton').on('mouseout',function(e) {
		$(this).css('background-image','wp-content/uploads/2013/05/buttonA_off.png');
	});
});

Try an absolute path: https://2013.whitehallrow.com/wp-content/uploads/2013/05/","buttonA_on.png

Still nothing… I’m supposed to have baz.js in my child theme’s js folder, right?

Yes, have you loaded the page and confirmed that baz.js is included properly? Could you post your enqueue code from your functions.php?

add_action(‘wp_enqueue_scripts’,’include_my_scripts’);
function include_my_scripts() {
wp_enqueue_script(‘baz.js’,’https://2013.whitehallrow.com/wp-content/themes/twentytwelve-child/js/baz.js’);
}

I put that at the very bottom of functions.php.

Hey ben, I don’t why this didn’t occur to me right away, there’s no reason to use javascript at all here anyway. You can just attach a :hover in your css. See: https://jsfiddle.net/etcth/3/

Haha, works like a charm. Thanks a bunch!