更改菜单上的背景图像在Wordpress中悬停

Question

以下是我的网站（click here）我试图在悬停菜单项时更改背景图片，并且我已经接近了！然而，当我悬停时，菜单消失，并且交换回原始图像并不像我喜欢的那样平滑。关于如何改进这个的任何想法??

＆＃13;

＆＃13;

<?php
/*
Template Name: Page - All Projects
*/
?>
<?php get_header(); ?>

<?php 
/* #Start the 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 with 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 all rollover elements and add rollover img src to 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>

＆＃13;

＆＃13;

＆＃13;

谢谢!!