I'm trying to get my sprite to animate a move left on hover, whilst text that overlays that image to go right

So far, I can only target the "a" tag, and the child "p" moves with it

My Markup
<NAV class="mainNav">
                <a class="navBut1" href="#">ABOUT<p class=
"linkDescription">err... the about section</p></a>

My js function works to send both in the same direction

$(function() {
	
$("nav.mainNav a").hover(function(e) {
	
		$(this)
			.hoverFlow(e.type, { opacity: 1, left:'-2%'}, 500)
			.css('overflow', 'visible')
		
	}, function(e) {
		
		$(this)
			.hoverFlow(e.type, { opacity: 0.7, left: '0%'}, 500)
			.css('overflow', 'visible')
		
	});
	
})

Am I barking up the wrong tree in trying to get this

tag to shift?