How to avoid a new request when changing an image in a hover event?

[MeNe]

I'm trying to create an event with jQuery that changes an image when the user hovers over it.The problem I have is that even though I have preloaded the image using jQuery, when the user hovers over the image, it makes a new request and loads the image again (it is already showed in the developers console as a preloaded image since the page was first loaded). I guess there is something wrong with the way I'm changing the CSS property with jQuery, but I can't find the right way to do it anywhere.Here's the code:HTML:\[code\]<div id="box" class="box"></div>\[/code\]CSS:\[code\].box{height: 100px; width: 500px; border-radius: 15px;background-color: #003366;background-image: url('images/blue-box.jpg');border:1px #003366;box-shadow: 4px 5px 2px #888888;}\[/code\]JavaScript:\[code\] $(document).ready(function() {var preload = [ 'css/images/blue-box.jpg', 'css/images/gray-box.jpg'];preloadImages(preload); function preloadImages(arrayOfImages) { $(arrayOfImages).each(function(){ (new Image()).src = http://stackoverflow.com/questions/15858629/this; }); }$box ="#box";$($box).mouseover(function(){ $($box).css("background-image", "url(' " + preload[1] + " ')");});\[/code\]});Thanks in advance,Diego.