Jquery - 使用 anchor 文本翻转更改图像

Question

我在 Jquery 中构建一个菜单，我需要能够在鼠标悬停在文本链接上时更改图像 src。

我已经构建了具有基本图像翻转的菜单，但是当 anchor 链接中的文本也处于鼠标悬停状态时，我需要更改图像。因此，当鼠标悬停 anchor 文本以及图像本身时，图像将翻转...

到目前为止，这是我的代码:

CSS:

 #subNav {
 list-style: none;
 }
 #subNav li {
 width: 130px;
 float: left;
 text-align:center;
 }
 #subNav li a {
 font-family: 'News Cycle', sans-serif;
 font-size:14px;
 text-decoration:none;
 color: #d33800;
 }
 #subNav li a:hover {
  color:#666666;
  }
 #subNav li a img {
  display: block;
  margin:auto;
  width: 88px;
  }

JQUERY:

  $(document).ready(function () {

//rollover swap images with rel
var img_src = "";
var new_src = "";

$(".overlay").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
$(".overlay").each(function(){
   var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});

    });

HTML

<ul id="subNav">
 <li><a href=""><img src="1-orange.png" rel="1-grey.png" class="overlay" alt="Bookings">Bookings</a></li>
 <li><a href=""><img src="2-orange.png" rel="2-grey.png" class="overlay" alt="Accomodation">Accomodation</a></li>
 <li><a href=""><img src="3-orange.png" rel="3-grey.png" class="overlay" alt="Eating">Eating</a></li>
 <li><a href=""><img src="4-orange.png" rel="4-grey.png" class="overlay" alt="Dates &amp; Prices">Dates &amp; Prices</a></li>
 <li><a href=""><img src="5-orange.png" rel="5-grey.png" class="overlay" alt="Travel Options">Travel Options</a></li>
 <li><a href=""><img src="6-orange.png" rel="6-grey.png" class="overlay" alt="Contact">Contact</a></li>
</ul>

Answer 1

除非你正在做我想念的事情，否则 jQuery 不需要在鼠标悬停时更改图像。

您是否尝试过将图像作为背景，然后通过 CSS 中的悬停事件更改背景？

您是否有任何带有图像的实例，以便我们更好地了解您要完成的工作(并更好地帮助您解决问题，因为通常有很多方法可以解决问题)。