Different image for hover state possible?

There are a couple of ways to accomplish this. It may be possible to accomplish what you’re looking for with css3 filters, although browser support will be a concern.

Alternatively, you should be able to just swap them out with javascript. It may be somewhat verbose to target the images, but it should be possible. You’ll need some nth-child stuff since there aren’t ids, just classes on the a tags. Let me know if you need help fleshing that out.

Thanks for your reply. I tried to use invert and hue saturate filters, and while they work, they don’t produce the colors I am looking for. I’d like to swap them out with javascript but admittedly don’t know where to start. Could you provide guidance? I am happy to compensate you for your time. You can contact me directly at kate at [email address moderated – these forums do not provide support via email] . Thanks!

I’ll just keep it here since I have a feeling others want to do this as well, and the forum mods discourage requests to move off the forums (although I don’t mind) ??

The code comes out pretty nicely, the meat of it is:

jQuery('#fsml_ffmain > a.fsml_fflink:nth-child(n) > img.fsml_fficon').hover(
	function(){
		jQuery(this).attr('src','[hover url]');
	}, function(){
		jQuery(this).attr('src','[original url]');
	}
);

Some notes:
* n is the index of the image you want to swap. The first icon is 1, then each subsequent one follows. Like/follow/subscribe buttons count in the ordering, although they can be targeted directly with “#fsml_fblike“, etc. in side the first jQuery() (or, remove the “.fsml_fficon” part from the end for those).
* Replace [hover url] with the url of the image for the hover state
* Replace [original url] with the original url of the image (non-hovered). You can also switch this to a third image if desired, but it won’t switch off of the hover state without this.
* JQuery is already enqueued/loaded by the plugin.
* Copy and paste the code and adjust it for each of the icons you want to swap

In terms of where to put the code, if you have a custom theme (ie it won’t be updated), that’s probably the best place for it. Although, I’ve been looking around and I think the Custom JavaScript Editor plugin may be easier for these sorts of JS snippets, especially if you don’t know which file to put the code in, etc. If you use that you can just past the code into its editor and check JQuery under “load also”, just to be safe. Only check plain JQuery, not all of the others, as they will slow down your load times. Let me know if you have any questions!

Thanks so much for the code – it worked perfectly!