php - Change background image on menu hover in Wordpress -

php - Change background image on menu hover in Wordpress -

here site (click here) 'm trying background image alter on hover of menu item, , i'm getting close! however, when hover, menu disappears , swap original image not smooth i'd like. ideas on how can improve this??

class="snippet-code-html lang-html prettyprint-override"><?php /* template name: page - projects */ ?> <?php get_header(); ?> <?php /* #start loop ======================================================*/ if (have_posts()) : while (have_posts()) : the_post(); ?> <?php /* #get fullscreen background ======================================================*/ $pageimage = get_post_meta($post->id,'_thumbnail_id',false); $pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false); ag_fullscreen_bg($pageimage[0]); ?> <script type="text/javascript"> jquery(document).ready(function($) { //rollover swap images rel var img_src = "$pageimage"; var new_src = ""; $(".rollover").hover(function(){ //mouseover img_src = $(this).attr('src'); //grab original image new_src = $(this).attr('rel'); //grab rollover image $(this).attr('src', new_src); //swap images $(this).attr('rel', img_src); //swap images }, function(){ //mouse out $(this).attr('src', img_src); //swap images $(this).attr('rel', new_src); //swap images }); //preload images var cache = new array(); //cycle through rollover elements , add together rollover img src cache array $(".rollover").each(function(){ var cacheimage = document.createelement('img'); cacheimage.src = $(this).attr('rel'); cache.push(cacheimage); }); })(jquery); </script> <div class="contentarea"> <div id='cssmenu'> <ul> <li class='has-sub '><a href='#'>center consoles</a> <ul> <li class='sub'><a href='http://takeitto11.com/striper2015/portfolio/2oo-cc/'><img class="rollover" width="1500px" height="1000px" rel="http://takeitto11.com/striper2015/wp-content/uploads/2014/10/striper_hps_1500x150010.jpg" />200 cc</a></li> <li class='sub'><a class="220cc" href='#'>220 cc</a></li> <li class='sub'><a class="2605cc" href='#'>2605 cc</a></li> </ul> </li> <li class='has-sub '><a href='#'>dual consoles</a> <ul> <li class='sub'><a class="200dc" href='#'>200 dc</a></li> <li class='sub'><a class="220dc" href='#'>220 dc</a></li> </ul> </li> <li class='has-sub '><a href='#'>walk arounds</a> <ul> <li class='sub'><a class="200wa" href='#'>200 walk around</a></li> <li class='sub'><a class="220wa" href='#'>220 walk around</a></li> <li class='sub'><a class="2601wa" href='#'>2601 walk around</a></li> <li class='sub'><a class="2901wa" href='#'>2901 walk around</a></li> </ul> </li> </div> <div class="clear"></div> </ul>

thank you!!

php jquery css wordpress